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

【问题标题】：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。我编辑了您的问题，因为以前无法理解。你能检查一下它是否仍然问你想问的问题吗？如果没有，请发表评论或自己编辑:)。
干得好乔纳斯。感谢您的支持:)

标签： javascript html css

【解决方案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;
}

【讨论】：

stackoverflow.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... 所以你要接受答案，然后不接受？