Question

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

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

当它变得高于300px时，我需要允许沿y轴滚动，这样可以正常工作。但我需要将"visiblity = false"设置为滚动条本身。

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

overflow-y: hidden;

虽然它隐藏了滚动条，但它也不允许滚动。有没有办法滚动滚动条而不显示滚动条？

Answer 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;
}

Answer 2

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

添加

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

对于您使用滚动条的div的ID或类。

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

Answer 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上测试过。

允许滚动但隐藏滚动条

3 个答案: