允许滚动但隐藏滚动条

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或类.

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

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

在FF和Safari上测试过.