Now that Safari 15.4 now supports native smooth scrolling, I am looking for a reliable way to check if a browser uses native smooth scrolling.
I have tried this method:
if (getComputedStyle(document.body).scrollBehavior === 'smooth') {
console.log('Smooth scrolling natively supported ');
}else{
console.log('Smooth scrolling NOT natively supported');
}
But it doesn't accurately detect smooth scrolling on Chrome and Safari 15.4 (it's returning a false negative). This is because scrollBehavior is set to auto.
I have also tried this method:
let supported = 'scrollBehavior' in document.documentElement.style;
if(supported == true){
console.log('Smooth scrolling natively supported ');
}else{
console.log('Smooth scrolling NOT natively supported');
}
Which seems to be more reliable, but when I disable smooth scrolling on Google Chrome, it reads a false positive. Could this possibly be because the browser supports it, but it is just not enabled? (I disabled it by starting Chrome from terminal using /Applications/Google\ Chrome.app --args --disable-smooth-scrolling)
What is the best method for checking is smooth scrolling is natively supported by a browser? Does anyone have an older version (pre v61) that they can test these on or other browsers that don't natively support smooth scrolling?
The most native way to do this would be to use the @supports CSS at-rule to check for browser support:
@supports (scroll-behavior:smooth) {
/* Supports smooth scrolling */
}
To do this check in JavaScript, you may use this function on the CSS object:
if(window.CSS.supports('scroll-behavior', 'smooth')) {
// Supports smooth scrolling
}