Is it possible to test for scrollIntoView browser compatibility?

Question

I am looking for a way to do a real-time test for scrollIntoView functionality of my user's browser. This is not a "caniuse" check; rather I want to have graceful degradation. I am using jQuery, and would like to use a preventDefault() if scrollIntoView is functional.

I started with:

        if (window.scrollIntoView) {
            e.preventDefault();
            $('p#result').text('scrollIntoView is available');
        } else {
            $('#result').text('scrollIntoView is not available');
        }

but I see that window.scrollIntoView is undefined in the inspector. However, because scrollIntoView works (in my version of Chrome and FireFox), it shouldn't be undefined. What other options can I have to see if it the user's browser supports the function?

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView `window` does not have this method — Huangism, Oct 24 '17 at 20:50

Stefan van de Vooren · Answer 1 · 2018-09-09T19:06:24.527

27

It could also be handy to check if scrollIntoView only support boolean true / false or also supports behaviour for smooth scrolling.

var isSmoothScrollSupported = 'scrollBehavior' in document.documentElement.style;
if(isSmoothScrollSupported) {
    element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});    
} else {
    element.scrollIntoView(false);
}

edited Sep 09 '18 at 19:06

answered Jun 27 '18 at 19:34

Stefan van de Vooren

2,524
22
19

4

Isn't it the opposite? i.e. passing an object to `scrollIntoView()` only when `isSmoothScrollSupported` is `true`? – BenMorel Sep 06 '18 at 11:33
2

@Benjamin Update my answer. Thanks for your comment – Stefan van de Vooren Sep 09 '18 at 19:07
Nice check. In Safari `scrollIntoViewOptions` are allowed, but it does not support `scrollBehavior`, so the above check will fail and will fallback to the alternative behaviour, which is worse for the user. That's why we preferred the other solution with try/catch now: https://stackoverflow.com/a/52393930/2590616 – RiZKiT Nov 06 '19 at 09:54

Drew Jex · Answer 2 · 2018-09-18T20:25:01.277

I found that at least for the WaterFox browser (and likely a few more), scrollBehavior did exist in document.documentElement.style as Stefan van de Vooren suggests, yet the browser would throw the following error:

TypeError: 'block' member of ScrollIntoViewOptions 'center' is not a valid 
value for enumeration ScrollLogicalPosition.

A simple try-catch statement solved the issue for us:

try {
   element.scrollIntoView({
     behavior: "smooth",
     block: "center"
   });
} catch (error) {
   //fallback to prevent browser crashing
   element.scrollIntoView(false);
}

llama · Accepted Answer · 2017-10-24T20:49:03.073

7

That method is on elements, so you can check document.documentElement.scrollIntoView.

edited Oct 24 '17 at 20:49

answered Oct 24 '17 at 20:42

llama

2,535
12
11

Works like a charm. I used `document.body.scrollIntoView` and the code executed correctly. Thank you! – Sablefoste Oct 25 '17 at 10:32

score 0 · Answer 4 · answered Nov 18 '19 at 13:42

0

You could check it like this:


if (typeof document.body.scrollIntoView === 'function') {
  // Do smth.
  yourNode.scrollIntoView();
}

answered Nov 18 '19 at 13:42

Nicolae Litvac

19
4

Luca Borrione · Answer 5 · 2021-12-20T11:06:28.693

I was not able to easily validate with unit tests these kind of checks, without having to implement odd overriding mechanisms exposing the unit test side to logic that it should not really know about.

Based on the answer of @DrewJex I ended in writing something entirely based on the how the browser behaves, which is way much easier to test as well.

const scrollIntoView = (element, params = true) => {
  try {
    element.scrollIntoView(params);
    return true;
  } catch (e) {
    return false;
  }
};

const scrollTo = (element, params = {}) => {
  try {
    window.scrollTo({ ...params, top: element.offsetTop });
    return true;
  } catch (e) {
    return false;
  }
};

export const scrollToElement = (element) =>
  scrollIntoView(element, { behavior: 'smooth' }) ||
  scrollIntoView(element) ||
  scrollTo(element, { behavior: 'smooth' }) ||
  scrollTo(element);

Is it possible to test for scrollIntoView browser compatibility?

5 Answers5