4

I've been working on this bug whole day, and couldn't solve it.

Have a JQuery scrollTop animation script, that detects $(window).scrollTop() value and do some animation and if click on button scrolling back to top. $(this).click(function() { $("html, body").animate({scrollTop:0},"fast"); });

This works normally great. and i always get a scrollTop value... Until ->

When using custom -webkit-scroll bar for your browser, you have to set in the css

html -> overflow: hidden body -> position: absolute, overflow-y:scroll, overflow-x:auto

the html hierarchy is just normal html->body-> div container - > div content etc.

Now since the browser scrollbar is removed, and have your own customized scrollbar, the scrollTop value always returns zero.

Have been trying all I can think of, no matter what other code I tried, the scrollTop value returns always zero.

So nothing is animating, and nothing is scrolling back.

Anybody know how to get the value when using the custom *browser -webkit-scrollbar for scrolling back to top?*

Cam
  • 1,909
  • 6
  • 19
  • 23

3 Answers3

1

You're no longer scrolling the window, you're scrolling an internal element, so you should try:

$(html).scrollTop()
$(body).scrollTop()

and see if 0 changes

methodofaction
  • 70,885
  • 21
  • 151
  • 164
0

I believe this is a bug which hasn't been fixed yet completely. Check here https://bugs.webkit.org/show_bug.cgi?id=9248

and check the last comment which shows this demo (http://maisqi.com/outros/bugs/chrome/CHN6) which still fails in webkit based browsers.

agaase
  • 1,562
  • 1
  • 15
  • 24
0

What happens when you remove overflow: hidden and position: absolute from your html and body CSS?

Chris
  • 3,729
  • 22
  • 30