Using webkit-scrollbar - scroll to bottom issue

Question

I am using the ::-webkit-scrollbar selector which requires the following css on the body tag:

body { position:absolute; top:0; left:10px; bottom:0; right:10px; overflow-y:scroll; overflow-x:hidden; }

I need to have the page scroll down to reveal an element, which is near the bottom of the page, using the following jQuery:

$('.tester').click(function() { $('html, body').animate({ scrollTop: $(document).height() }, 'slow'); return false; });

This behaviour doesn't work due the position:absolute declaration on the body tag. If I remove this, the scrolling down behaviour works as expected, but it messes-up the webkit-scrollbar styling.

Can anyone think of a workaround?

You appear to be animating the html element as well. What happens if you just do $("body") — Kinlan
– Kinlan, Commented May 18, 2011 at 13:17
Hi. I did actually try that, just tried it again to confirm - doesn't work. — Jamie
– Jamie, Commented May 18, 2011 at 13:31
Sure, just banged this together in case anyone else wants to have a look: TEST CASE If you use the Chrome dev inspector and switch-off the position:absolute from the body tag, the scroll behaviour will work. BTW: you may have to reduce the height of yoru browser window for the scrollbar to show. — Jamie
– Jamie, Commented May 18, 2011 at 14:32

Jamie · Accepted Answer · 2011-05-23 18:03:34Z

2

Well, after much searching and playing around, I have concluded that this just isn't going to work.

This is mainly as the CSS above is a hack in the first place, to get the browser to hide the native scrollbar and show the webkit styled version within the body.

Hopefully this will be considered by the webkit team in the future, providing ways to implement this functionality without having to resort to using absolute positioning on the body tag.

Unfortunately, for now at least, I have had to abandon using the custom scrollbars as I must have scrollTop functionality for this project.

answered May 23, 2011 at 18:03

Jamie

3714 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using webkit-scrollbar - scroll to bottom issue

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related