Login/Register
Does scrollIntoView work in all browsers?
Asked Answered
Solved javascriptjqueryjs-scrollintoview
S

7

84

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

Sonjasonnet answered 25/2, 2012 at 16:37 Comment(1)
caniuse.com/scrollintoview – Parmer
I
83

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.

Interflow answered 25/2, 2012 at 16:55 Comment(10)
Note: The jQuery plugin does not work (right) if the scrolled element is in an iframe (for obvious reasons). element.scrollIntoView does work even then. – Pivoting
the new spec with ScrollIntoViewOptions allows to specify behavior: 'smooth'. unfortunately there’s no way to easily detect if this option is supported in a browser… – Undershirt
By jumping to it, users have no idea whether: page has been scrolled up (they actually do if they look at the scroll bar) page has been scrolled down (they actually do if they look at the scroll bar) they've been redirected elsewhere (they actually do because this is instant if it's somewhere on the current page). As a side note, if it's animated, there are new issues like frustrating the user with slow animations, the animation being choppy, the animation being as confusing as the instant jump, etc. – Alwin
Firefox seems to support behavior: "smooth", but not Chrome or Safari. – Milagro
It's useful for things like creating a custom dropdown menu where the arrow keys control up/down and depending on the selected item the menu scrolls. It would be a bad user experience not to have it jump instantaneously between items in that case. – Jehad
@Milagro neither in IE/Edge. See reference, only FF36+ has this feature. Thus, it's useless, unfortunly. – Benevolent
Downvote, because wrong facts: "this has long been supported by all major browsers". Only FF. – Racism
@jensakoch Only FF? Yes if you consider "with options", but solution of this answer provides smooth scrolling in all browsers since long ago... Maybe you misunderstood the answer... – Interflow
Chrome now too supports behavior: "smooth", but Safari still is lagging. – Cornfield
Safari not supporting block: "center" is there any alternatives? – Chlortetracycline
S
13

Looks like it does: http://www.quirksmode.org/dom/w3c_cssom.html

Sonjasonnet answered 25/2, 2012 at 16:40 Comment(0)
O
3

I use Matteo Spinnelli's iScroll-4 and it works in iOS safari as well. It has three methods scrollTo, scrollToElement and scrollToPage. Let's say you have an unordered list of elements wrapped inside a div. As Robert Koritnik has written above, you need to have that slight animation to show that you have scrolled. The below method achieves that effect.

scrollToElement(element, time);
Othello answered 18/11, 2012 at 9:13 Comment(1)
your link to iScroll-4 is dead – Reconstructionism
A
3

read please about scrollIntoViewIfNeeded 

if(el.scrollIntoViewIfNeeded){
el.scrollIntoViewIfNeeded()
}else{
el.scrollIntoView()
}
Alla answered 2/2, 2017 at 8:12 Comment(0)
T
2

You can use jQuery alternative and animate <html> and <body> elements:

$('html, body').animate({
  scrollTop: $("#myElem").offset().top
}, 1000);
Tanganyika answered 20/6, 2018 at 13:7 Comment(0)
F
1

Have not tried this, but seems like piggybacking on built in scrollIntoView function would save much code. Here is what I would do if you want animated action:

  1. Cache current scroll position of the container as START POSITION
  2. run built in scrollIntoView
  3. Cache the scroll position again as the END POSITION
  4. Return container back to START POSITION
  5. Animate scrolling to END POSITION
Ferula answered 25/11, 2014 at 5:9 Comment(0)
A
-1

Css solved it guys!! I picked the target id with #idSelected and styled it with css "scroll-margin-top" and defined my margin top in rems (use what ever measurement that suits you).

#idSelected {
   scroll-margin-top: 10rem;
}
Abeyta answered 9/8, 2022 at 9:42 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.