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?
CodePudding user response:
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
}