Bug Tracker

Opened 7 years ago

Closed 6 years ago

Last modified 6 years ago

#13959 closed bug (wontfix)

scrollTop animation on root scrollable element

Reported by: cpartiot@… 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 6 years ago by timmywil

Component: unfiledeffects
Resolution: wontfix
Status: newclosed

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.

comment:2 Changed 6 years ago by cpartiot@…

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 6 years ago by timmywil

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 6 years ago by quarterwind@…

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:5 Changed 6 years ago by dmethvin

comment:6 in reply to:  5 Changed 6 years ago by quarterwind@…

Replying to dmethvin:

Use a promise: http://jsfiddle.net/c4QzM/1/

This works! Thanks!

comment:7 Changed 6 years ago by reyncor@…

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.

Note: See TracTickets for help on using tickets.