Chrome（windows）不隐藏滚动条

我有这个可滚动的div，当我不滚动时（在我的Mac中的Chrome）隐藏滚动条。但在Windows 8上，它在Chrome和Firefox中不起作用。Chrome（windows）不隐藏滚动条

IE不支持这种过，但我一直在使用下面的CSS使它：

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

有什么办法使这种行为的Chrome和Firefox

这里是一个jsfiddle

来源

2014-07-23 Jeanluca Scaljeri

也许你可以使用类似的东西？

body { 
    margin:0; 
    padding:0; 
    overflow-y: hidden; 

} 
body:hover { 
    overflow-y: scroll; 
}

http://jsfiddle.net/4RSbp/165/

来源

2014-07-23 13:31:44

不错的特克斯男人:) –

这感觉偷偷摸摸，但我喜欢它。确实是我想要的。 – jcaruso

这是否会导致无障碍问题？ – phk

滚动条隐藏在您的Mac上，因为这是系统首选项（系统偏好设置>常规>显示滚动条）。不幸的是，Firefox或Chrome没有-ms-overflow-style的版本。

来源

2014-07-23 13:10:49 marcelo2605

对于正在添加的人在这里，如果你想隐藏在一个跨浏览器跨系统的方式滚动条和保持滚动性，而不鼠标渲染的视觉毛刺启用;将它们隐藏在容器的极限之下是一种好方法。（注意，这将会很长）

假设你有一个可滚动的容器，并且你想要隐藏垂直滚动条（即使是现代系统显示的薄透明的容器）。它的ID是#scrollable：

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

为了实现我们想要的，#scrollable必须由专门的节点包含了它（一个div会的工作，在这个例子＃滚动覆盖），我们必须知道#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将被拉伸到其inmediate家长的高度（＃滚动覆盖）和其庞大的内容将使它像一个可滚动的框，但是，由于它的宽度比其父母具有'overflow：hidden'属性大20px，所以滚动条将不会显示，因为它在隐藏在#scrollable右侧的20px上呈现。

这使我们很不方便，#scrollable的内容也可能在该隐藏的20px宽度区域中呈现;为了避免这种情况，有两种方法。一个是为包装#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唯一的选择解决这个问题，采用箱大小在正确的一个20像素的填充：

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

这样一来，任何内部＃呈现可滚动将避免右侧20px的隐藏区域，'box-sizing：border-box'会告诉浏览器在#scrollable的总共820px宽度中包含20px的填充（否则，它将增长到计算总计840px）。这里检查框大小的兼容性：http://caniuse.com/#search=box-sizing

当然，这个例子也可以使用水平滚动，只是增加#scrollable 20px的高度，使其高于其中间父级的高度。这是线索;）

来源

2016-11-18 18:26:05

Chrome（windows）不隐藏滚动条

回答

相关问题