Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does scrollIntoView work in all browsers?

Does scrollIntoView() work in all browsers? If not is there a jQuery alternative?

like image 910
9-bits Avatar asked Feb 25 '12 16:02

9-bits


People also ask

Does scrollIntoView work on Safari?

Note: scrollIntoView is Partially Supported on Safari 13, which means that any user who'd be accessing your page through Safari 13 can see it perfectly.

Can I use scrollIntoView?

scrollIntoView on Firefox is fully supported on 36-104, partially supported on 2-35, and not supported on below 2 Firefox versions. scrollIntoView on Chrome is fully supported on 61-106, partially supported on 4-60, and not supported on below 4 Chrome versions.

When should I use scrollIntoView?

The scrollIntoView() method scrolls an element into the visible area of the browser window.

How do I make scrollIntoView smooth?

Native method: scrollIntoView The usage is simple, just like this: function scroll(e) {e. scrollIntoView({behavior: "smooth", block: "start"});}scroll(document. getElementById(YOUR_DIV_ID));


1 Answers

It is supported yes, but user experience is... bad.

As @9bits pointed out, this has long been supported by all major browsers. Not to worry about that. The main problem is the way that it works. It simply jumps to a particular element that may as well be at the end of the page. By jumping to it, users have no idea whether:

  • page has been scrolled up
  • page has been scrolled down
  • they've been redirected elsewhere

The first two can be determined by scroll position, but who says users kept track of scroll position before jump was done? So it's an nondeterministic action.

The last one may be true especially if the page has moving header that gets scrolled out of view and remaining page design doesn't imply anything on being on the same page (if it also doesn't have any total height vertical element like left menu bar). You'd be surprised how many pages have this problem. just check them out yourself. Go to some page, look at it at top, then press End key and look at it again. It is likely that you'll think it's a different page.

Animated scrollintoview jQuery plugin to the rescue

That's why there still are plugins that perform scroll into view instead of using native DOM function. They usually animate scrolling which eliminates all 3 issues outlined above. Users can easily keep track of the movement.

like image 104
Robert Koritnik Avatar answered Oct 05 '22 20:10

Robert Koritnik