#13959 closed bug (wontfix)
scrollTop animation on root scrollable element
| Reported by: | 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()
Change History (7)
comment:1 Changed 10 years ago by
| Component: | unfiled → effects |
|---|---|
| Resolution: | → wontfix |
| Status: | new → closed |
comment:2 Changed 10 years ago by
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()?
comment:3 Changed 10 years ago by
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".
comment:4 Changed 10 years ago by
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.
comment:6 Changed 10 years ago by
comment:7 Changed 9 years ago by
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.