Hopeless
Hopeless

Reputation: 4773

jQuery scrollTop stops working on the latest version of webkit-based browser (Chrome Version 61.0.3163.100)?

It's interesting that this has worked for many years on all browsers but now just stops working on the latest version of webkit-based browsers (Chrome and Opera). Just a month ago it was still working, but now not working any more:

$(document.body).scrollTop(0);
  //or using animation
$(document.body).animate({
  scrollTop:0
}, 500, "swing");

There is not any error printed in the console, it just does not scroll at all. That same code works fine in other browsers such as Microsoft Edge.

So could anyone find out what's wrong with webkit-based browsers or that the jQuery should be updated to work with them?

Please note that I don't want to find a way to scroll it (because I know we don't need jQuery and there are always work-arounds), I just want some explanation about this, since that code has been used for years and should not never stop working. It will break user experience on a lot of websites.

Demo

Upvotes: 1

Views: 338

Answers (2)

user5261527
user5261527

Reputation: 1

for me, scrollTop() stopped also working. Delete height from html in CSS - miracle, working again! found it somewhere in the depth of the internet...

Upvotes: 0

Hopeless
Hopeless

Reputation: 4773

Not sure if this is what intended by the update of webkit-based browsers but looks like document.body is not considered as the direct container of all the elements inside (although if applying overflow:hidden on it, the content inside will be tripped off expectedly). The scrollbars seem to belong to the document.documentElement (represented by html tag). So if we replace document.body with document.documentElement, it then works again. BUT that may not work for other browsers (such as Microsoft Edge), so it's safe to include both, such as like this:

$("html,body") ...
//or
$([document.documentElement, document.body]) ...

Still it's very confusing with this update of webkit-based browsers.

Upvotes: 1

Related Questions