允许滚动但隐藏滚动条

时间:2014-08-02 13:28:57

标签: javascript html css

我有一个div,其元素样式如下:

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

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

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

overflow-y: hidden;

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

3 个答案:

答案 0 :(得分:29)

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

答案 1 :(得分:11)

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

添加

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

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

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

答案 2 :(得分:7)

试试这个:

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