Modernizr: Detect support for scrollIntoView(scrollIntoViewOptions)

Created on 31 Mar 2015 · 6Comments · Source: Modernizr/Modernizr

no idea _how_, but it would be useful to just use element.scrollIntoView({behavior: "smooth"}) if available and else some polyfill for smooth scrolling via JS.

detect needed

Source

flying-sheep

👍12

Most helpful comment

I just noticed a Stack Overflow post that suggests that 'scrollBehavior' in document.documentElement.style is a sufficient test. The results I'm seeing for that do match up with the notes about who does/doesn't support the behavior option on https://caniuse.com/#search=scrollIntoView, but it's not clear to me if there's a direct connection (or really any connection) between a browser supporting the style property and supporting that option for the scrollIntoView call.

Edit: oh, and even though it's already three years old, I do have to give a +1 to @andyearnshaw's approach above, that is a clever one.

RwwL on 7 Sep 2018

👍7

All 6 comments

I was just passing by and thought it might be interesting to attempt this. Something like the following would detect that _scrollIntoViewOptions_ is supported, but doesn't confirm that smooth scrolling is supported specifically:

(function test() {
    var res = false,
        a = document.createElement('a'),
        csy = window.pageYOffset,
        csx = window.pageXOffset;

    a.style.cssText = 'position: absolute; top: 0px; width: 1px; height: ' + (window.innerHeight + 1) + 'px;';

    // Test
    document.body.appendChild(a);
    a.scrollIntoView({ block: 'end' });
    res = a.getBoundingClientRect().top === -1;
    document.body.removeChild(a);

    // Revert and return
    window.scrollTo(csx, csy);
    return res;
})();

I haven't thoroughly tested it beyond running it in the console in a few pages in Firefox (true) and Chrome (false), though. It seems unlikely that a browser would implement _scrollIntoViewOptions_ without bothering with smooth scrolling at the same time, but you never know. A more robust test might follow up (if this test is true) with a check that the scroll position hasn't changed when behaviour: 'smooth' is added to the view options.