CODEWITHSUNDEEP
jqueryhtmlwebkitcss
Cam
Cam

Reputation: 1959

-Webkit-scroll bar + overflow + JQuery scrollTop returns always zero

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?*

Upvotes: 4

Views: 3652

Answers (3)

agaase
agaase

Reputation: 1612

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.

Upvotes: 0

methodofaction
methodofaction

Reputation: 72465

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

Upvotes: 1

Chris
Chris

Reputation: 3795

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

Upvotes: 0

Related Questions