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

Question

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

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

我需要允许滚动沿Y轴当它变得高于300px，这工作很好。但我需要将“visiblity=false”设置为滚动条本身。

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

overflow-y: hidden;

当它隐藏滚动条时，它也不允许滚动。有没有一种方法可以在滚动条不可见的情况下滚动？

Answer 1

试试看：

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演示

在FF和Safari上测试。

Answer 2

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

只需添加

::-webkit-scrollbar {display:none;}

与滚动条一起使用的div的id或类。

以下是Webkit中一个有用的链接自定义滚动条

Answer 3

如果在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;
}