Remove scrollbar but not scrolling functionality
Question by Max
I know you can define overflow:hidden; on the body of the HTML to remove the scrollbar, but I would like to still be able to scroll with the arrows or scroll wheel on a mouse.
Thanks in advance for any help.
Edit:
Thanks for all the advice about on hover scrollbars and custom bars. Also thank you for all concerns about impacting users experience by removing the scrollbars. I shall elaborate a little more so you explain where I am coming from.
I have a circular page (if you scroll with a scroll wheel or arrow button, when it reaches the bottom it resets to the top of the page and starts again). A never ending loop. A scrollbar impacts on this as a bar is limited and when it reaches the bottom and resets to the top the users mouse is still at the bottom of the page meaning when they move it there is some flickering between the top and bottom of the page.
I plan to remove the scroll bar and replace it with arrow buttons at the top and the bottom of the window. This is why I would like to remove the scrollbar completely but leave the scrolling functionality.
Answer by Starx
Ok, new answer. I just developed a little trick to do so, mixed with jQuery.
Create a wrapper div inside the body, with the following css.
body { overflow: hidden; }
#wrapper { overflow: auto; }
Then, simply set their respective heights:
$("body").height($(window).height());
$("#wrapper").height($("#text").height());
Demo
To support for resizes
$(window).trigger('scroll');
$(window).scroll(function() {
$("body").height($(window).height());
$("#wrapper").height($("#text").height());
});
Demo
