A clean way to hide the scrollbar?
Note that I know very well that there are other SO topics out there. The reason I am re-asking is that most of them are quite out of date, so these answers still apply (basically only one element has an overflow: hidden, while a child has an overflow: auto and padding- right to "hide" the div (it's not actually hidden, and is not really a clean solution in my opinion) Is there a more modern way to hide the scrollbar, but still allows you to scroll, which is not a simple throw the scrollbars are out of sight, but really just hides the scrollbar? Again, I realize there are already SO questions for this question, I just would like to get a solution to this rather than tape it (which makes the scrollbar secretive).
For browsers that support the prefix -webkit-
, use this CSS:
::-webkit-scrollbar {
display:none;
}
Or, if you want it on a specific element, do this:
element::-webkit-scrollbar {
display:none;
}
This hides the scrollbar, but it doesn't stop it when scrolling. If you want to stop scrolling altogether, you may need to use javascript or just make the page shorter. Here is the violin. The text selection will scroll, but there is no scroll bar.
This idea would be good for a mobile site as touchscreen phones don't need a scrollbar.
source to share
Are you looking for something like this? fiddle http://jsfiddle.net/tovic/Uz7wc/
body {
padding:50px;
}
.hidden-scrollbar {
background-color:black;
border:2px solid #666;
color:white;
overflow:hidden;
text-align:justify;
}
.hidden-scrollbar .inner {
height:200px;
overflow:auto;
margin:15px -300px 15px 15px;
padding-right:300px;
}
source to share