Geek Answers Handbook

Chrome (windows) does not hide scrollbar

I have this scrollable div that (on my Mac in Chrome) hides the scrollbar when I don't scroll. However, in Windows 8 it does not work in Chrome and Firefox.

Those. this is not supported either, but I turned it on using the following CSS:

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

Is there a way to enable this behavior for Chrome and Firefox

Here is jsfiddle

+4
source share
3 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/

+14
source

Mac, ( > > ). , -ms-overflow-style Firefox Chrome.

+7

, , - ; - . (, )

, , ( , ). : # scrollable:

<html>
[...]
<div id="scrollable">Some Y large content</div>
[...]
</html>

, , #scrollable node ( div # scrollable-cover), #scrollable . , 800px x 900px. , :

<html>
[...]
<div id="scrollable-cover">
 <div id="scrollable">Some Y large content</div>
</div>
[...]
</html>

CSS:

#scrollable-cover {
 width: 800px;
 height: 900px;
 overflow: hidden
}
#scrollable {
 width: 820px;
 height: 100%;
 overflow: scroll;
}

#scrollable (# -), , 20 , , 'overflow: hidden', , 20px, # scrollable.

, #scrollable 20 ; , . #scrollable # 800 :

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

, 800 . , CSS, 20px :

#scrollable-cover {
 width: 800px;
 height: 900px;
 overflow: hidden
}
#scrollable {
 width: 820px;
 height: 100%;
 overflow: scroll;
 padding-right: 20px
 box-sizing: border-box;
}

, , #scrollable, 20px , "box-sizing: border-box" 20px 820px # scrollable ( 840px). : http://caniuse.com/#search=box-sizing

, , , #scrollable 20px . ;)

+2

More articles:


All Articles