Chrome (windows) does not hide scrollbar

I have this scrollable div, which (on my Mac in Chrome) hides the scrollbar when I don't scroll. On windows 8 however, it doesn't work in Chrome and Firefox.

Ie doesn't support this too, but I've enabled it using the following CSS:

-ms-overflow-style: -ms-autohiding-scrollbar;

Is there any way to enable this behaviour for Chrome and Firefox

Here is a jsfiddle

Answers


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 ;)


Need Your Help

Airflow Python Unit Test?

python airflow

I'd like to add some unit tests for our DAGs, but could not find any. Is there a framework for unit test for DAGs? There is an End-to-End testing framework that exists but I guess it's dead: https://

Casting interfaces for deserialization in JSON.NET

c# .net json json.net

I am trying to set up a reader that will take in JSON objects from various websites (think information scraping) and translate them into C# objects. I am currently using JSON.NET for the deseriali...