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?

Answer 1

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.