Side navigation
#13959 closed bug (wontfix)
Opened May 29, 2013 09:34AM UTC
Closed June 12, 2013 09:18PM UTC
Last modified October 28, 2013 09:37PM UTC
scrollTop animation on root scrollable element
| Reported by: | cpartiot@wanadoo.fr | Owned by: | |
|---|---|---|---|
| Priority: | undecided | Milestone: | None |
| Component: | effects | Version: | 2.0.1 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
$('html').scrollTop(100); //works on firefox
$('body').scrollTop(100); //works on webkit
$(window).scrollTop(100); //works on both !!
$(document).scrollTop(100); //works on both !!
But
$('html').animate({scrollTop:100}); //works on firefox
$('body').animate({scrollTop:100}); //works on webkit
$(window).animate({scrollTop:100}); //don't works :(
$(document).animate({scrollTop:100}); //don't works :(
.animate() on 'scrollTop' and 'scrollLeft' should works like .scrollTop() ans .scrollLeft()
Attachments (0)
Change History (7)
Changed June 12, 2013 09:18PM UTC by comment:1
| component: | unfiled → effects |
|---|---|
| resolution: | → wontfix |
| status: | new → closed |
Changed June 13, 2013 07:32PM UTC by comment:2
I think it's a bad idea to call .animate() on both html and body element, first for performance reasons, and <html> and <body> must be both scrollable (if they have both overflow:scroll style
exemple: http://codepen.io/anon/pen/sfhqB
If it's possible for .css() why it's "too bluky" for .animate()?
Changed June 13, 2013 08:47PM UTC by comment:3
First of all, I haven't noticed a performance issue. Second of all, html and body do not both need to be scrollable. Only one of the animations needs to work (http://codepen.io/timmywil/pen/LIqar).
Last, .css() uses the same code as .animate() to set scrollTop (the .scrollTop() method handles finding a window object outside of .css()). You can use a css hook if you like and it will fix both .css and .animate if you'd like to animate scrollTop on either the window or document, but that is an edge case that would probably not warrant the amount of code that it would take to fix it, which is what I meant by "too bulky".
Changed July 30, 2013 10:00AM UTC by comment:4
One thing that makes this ticket important is that if we use
$('html, body').animate({ scrollTop: 100 }, function() { /*callback*/ });
The call back would get executed twice, which is unacceptable.
Here is the jsfiddle to demonstrate: http://jsfiddle.net/c4QzM/
I don't know how to reopen this ticket but do please provide at least a feature detection.
Changed July 30, 2013 12:58PM UTC by comment:5
Use a promise: http://jsfiddle.net/c4QzM/1/
Changed August 01, 2013 09:53AM UTC by comment:6
Changed October 28, 2013 09:37PM UTC by comment:7
If you really would like the best possible performance, without checking user agents, you can use the fact that all browsers will return 0 when scrollTop does not work. As long as the scroll has moved, you can optimize and kill a selector. After the optimization has taken place, the optimization code will only have the overhead of one boolean check and a little bit of memory.
I think the best suggestion here is to animate on both html and body:
$('html, body').animate({ scrollTop: 100 });It would be too bulky to try to animate scrollTop on window/document and a feature detect to see whether html or body supports scrolling would be too disruptive.