允许滚动但隐藏滚动条[重复]

Posted 2023-02-22

【中文标题】允许滚动但隐藏滚动条[重复]

【英文标题】：Allow scroll but hide scrollbar [duplicate]

【发布时间】：2014-09-25 13:27:37

【问题描述】：

我有一个div，其元素样式如下：

 <div style="overflow-y: auto; max-height: 300px;">< id="DivTableContainer" ></div>

当它变得高于 300 像素时，我需要允许沿 y 轴滚动，这很好用。但我需要将"visiblity = false" 设置为滚动条本身。

我尝试使用这种元素样式：

overflow-y: hidden;

虽然它隐藏了滚动条，但它也不允许滚动。有没有办法让滚动条不可见？

【问题讨论】：

试试nanoScroller，当你悬停时它会显示滚动条。

嗨@Jake745。我编辑了您的问题，因为以前无法​​理解。你能检查一下它是否仍然问你想问的问题吗？如果没有，请发表评论或自己编辑:)。

干得好乔纳斯。感谢您的支持:)

【参考方案1】：

最好在 html 中使用两个 div 容器。

如下图：

HTML：

<div id="container1">
    <div id="container2">
        // Content here
    </div>
</div>

CSS：

 #container1
    height: 100%;
    width: 100%;
    overflow: hidden;


 #container2
    height: 100%;
    width: 100%;
    overflow: auto;
    padding-right: 20px;

【讨论】：

***.com/a/16671476/540144的副本

这很好用

【参考方案2】：

我知道这是一个老歌，但这里有一个用纯 CSS 隐藏滚动条的快速方法。

只需添加

::-webkit-scrollbar display:none;

到您正在使用滚动条的 div 的 id 或类。

这是一个有用的链接Custom Scroll Bar in Webkit

【讨论】：

虽然不能在 Firefox 上工作 ;)

正确，Firefox 没有 ::webkit .. 你必须使用一些 javascript 或 jquery 来隐藏它或尝试使用一些 css 来设置它的样式。

【参考方案3】：

试试这个：

HTML：

<div id="container">
    <div id="content">
        // Content here
    </div>
</div>

CSS：

#container
    height: 100%;
    width: 100%;
    overflow: hidden;


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


html, body
    height: 99%;
    overflow:hidden;

JSFiddle Demo

在 FF 和 Safari 上测试。

【讨论】：

好主意 imbondbaby。

-1... 所以你要接受答案，然后不接受？