Chrome (windows) Does Not Hide Scrollbar
Answer :
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/
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.
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 ;)
Comments
Post a Comment