Chrome (windows) does not hide scrollbar

2020-08-15 04:19发布

站内问答 / HTML/CSS
413 3 5

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

3条回答
该账号已被封号
2楼-- · 2020-08-15 04:44

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

查看更多
0人赞 添加讨论(0) 举报
家丑人穷心不美
3楼-- · 2020-08-15 04:57

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/

查看更多
0人赞 添加讨论(0) 举报
做个烂人
4楼-- · 2020-08-15 05:01

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)