使用溢出时无法隐藏滚动条：自动

Posted 2023-02-21

【中文标题】使用溢出时无法隐藏滚动条：自动

【英文标题】：can't hide scrollbar when using overflow: auto

【发布时间】：2013-12-25 04:34:26

【问题描述】：

我有这个 CSS：

.div 
    background-color: red;
    position: relative;
    height: 414px;
    overflow: auto;
    width: 902px;
    margin: 0px auto;

我尝试使用overflow-y: hidden;，滚动条消失但滚动不起作用。希望你明白我想要什么... 另外，我应该使用自动还是滚动？使用 auto 我也可以看到水平条。

这里是 JSFiddle：http://jsfiddle.net/sp95S/ 谢谢！

【问题讨论】：

您预计会发生什么？这是正确的行为。

我想隐藏滚动条而不影响滚动。

那你将如何滚动内容？！

@DannyBeckett 是键盘箭头还是鼠标滚轮？

在这种情况下，您需要使用 javascript。单靠 CSS 无法满足您的要求。

【参考方案1】：

如果你想隐藏滚动条，但保持滚动，你可以查看一个名为 slimscroll 的插件。滚动条在那里，但它可以配置为相当不显眼。

http://rocha.la/jQuery-slimScroll

【参考方案2】：

您似乎希望页面在不显示滚动条的情况下仍然滚动。

这里已经回答过几次了：

hide scrollbar while still able to scroll with mouse/keyboard Hiding the scrollbar on an html page

基本上您可以使用 javascript（或 jquery，尽管您不一定需要它）。在 webkit 浏览器上，有一个隐藏滚动条的功能：

::-webkit-scrollbar  
display: none; 

但它不适用于 firefox、internet explorer 或 opera。

【讨论】：

这个可能在 Opera 上工作，因为它现在运行 Webkit，但我仍然不会使用它，因为它不能在 Webkit 以外的任何东西上工作。跨度>

【参考方案3】：

创建一个内部 div：http://jsfiddle.net/sp95S/1/

.div 
    background-color: red;
    position: relative;
    height: 214px;
    overflow: hidden;
    width: 452px;
    margin: 0px auto;

#inner
    width: 100%;
    overflow: auto;
    height: 100%;
    padding-right: 15px;

【讨论】：

非常聪明的答案！

【参考方案4】：

如果你想隐藏滚动条，但保留功能，你可以使用：

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar 
  display: none;


/* Hide scrollbar for IE, Edge and Firefox */
.example 
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

【参考方案5】：

实际上，正如@Reinier68 所说，大多数现代浏览器都有一种解决方法。我个人最喜欢他的回答，你可以使用：

::-webkit-scrollbar -> 对于 webkit 浏览器

-ms-overflow-style: none -> 适用于微软浏览器

和

scrollbar-width: none -> 对于火狐

这将使您能够非常轻松地创建一个适用于几乎所有常见浏览器的解决方案，并且很可能不会给您带来很多关于弃用的问题，因为所有这些都有很好的文档记录并且它们的开发很容易遵循。