Chrome (windows) does not hide scrollbar
For anyone comming here, if you want to hide scrollbars in a cross-browser cross-system way and keeping the scrollability enabled without visual glitching of mouse over rendering; hiding them behind the limits of your container is a good approach. (Beware, this will be long)
Let's say you have a scrollable container and you want to hide the vertical scrollbar (even the thin transparent one that moderns systems shows). its ID is #scrollable:
<html>
[...]
<div id="scrollable">Some Y large content</div>
[...]
</html>
To achieve what we want, #scrollable must be contained by a node exclusively for it (a div would work, in this example #scrollable-cover) and we must know #scrollable layout width and height. Lets say it'll be an area of 800px x 900px. So we got:
<html>
[...]
<div id="scrollable-cover">
<div id="scrollable">Some Y large content</div>
</div>
[...]
</html>
And its CSS:
#scrollable-cover {
width: 800px;
height: 900px;
overflow: hidden
}
#scrollable {
width: 820px;
height: 100%;
overflow: scroll;
}
With that, #scrollable will be stretched to the height of its inmediate parent (#scrollable-cover) and its large content will render it like an scrollable box, but, since its width is 20px bigger than its parent, which has an 'overflow: hidden' property, the scrollbar will not be shown, because it renders on the 20px hidden at the right of #scrollable.
This lead us to an inconvenient, the content of #scrollable could also be rendering in that hidden 20px width area; to avoid that, there is two methods. One is to wrapper all the content of #scrollable in a #scrollable-wrapper with 800px width and auto height:
<html>
[...]
<style>
#scrollable-cover {
width: 800px;
height: 900px;
overflow: hidden
}
#scrollable {
width: 820px;
height: 100%;
overflow: scroll;
}
#scrollable-wrapper {
width: 800px;
height: auto;
}
</style>
[...]
<div id="scrollable-cover">
<div id="scrollable">
<div id="scrollable-wrapper">Some Y large content</div>
</div>
</div>
[...]
</html>
This way all content will be rendered in a 800px width layout inside our scrollable box. But, if you dont want to add another element, you can solve this with the Second CSS only option, using box-sizing an a 20px padding at the right:
#scrollable-cover {
width: 800px;
height: 900px;
overflow: hidden
}
#scrollable {
width: 820px;
height: 100%;
overflow: scroll;
padding-right: 20px
box-sizing: border-box;
}
This way, anything rendered inside #scrollable will avoid the 20px hidden area at the right, and 'box-sizing: border-box' will tell the browser to include the 20px of the padding in the total 820px width of #scrollable (otherwise, it'll grow to a computed total of 840px). Check box-sizing compatibility here: http://caniuse.com/#search=box-sizing
And of course, this example could also work with horizontal scrolling, just increasing the height of #scrollable 20px above the height of it's inmediate parent. That's the clue ;)
Scrollbar is hiding on your Mac because this is a system preference (System Preferences > General > Show scroll bars). And unfortunatelly there is no version of -ms-overflow-style for Firefox or Chrome.
maybe you can use something like that?
body {
margin:0;
padding:0;
overflow-y: hidden;
}
body:hover {
overflow-y: scroll;
}
http://jsfiddle.net/4RSbp/165/