Search code examples
javascripthtmlcsssmooth-scrolling

Accurately detect if a browser supports smooth scrolling?

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?

Solution

  • 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
}