允许滚动但隐藏滚动条

Question

我有一个包含以下元素样式的 div ：

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

当纵向滚动条高度超过300像素时，我需要允许在y轴上滚动，这个功能已经实现了。但我还需要将滚动条本身的"visiblity = false"设置。

我尝试使用以下元素样式：

overflow-y: hidden;

虽然它隐藏了滚动条，但也禁止了滚动。有没有办法在不显示滚动条的情况下实现滚动？

- Suganth G

---

尝试使用nanoScroller，它会在鼠标悬停时显示滚动条。 - Mottie

嗨@Jake745。我编辑了你的问题，因为之前它不可理解。你能否请检查它是否仍然询问你想要问的问题？如果不是，请留言或自行编辑 :)。 - Jonas Schäfer

干得好，乔纳斯。谢谢你的支持 :) - Suganth G

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

- Joe Mike

---

复制自https://dev59.com/j2Qn5IYBdhLWcg3wpYj0#16671476 - itsazzad

Answer 2

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

只需添加以下代码：

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

对于您正在使用滚动条的div的id或class。

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

- lostInTheTetons

---

不过在 Firefox 上不起作用 ;) - estellechvl

正确的是，Firefox没有::webkit .. 你需要使用一些JavaScript或jQuery来隐藏它，或者尝试使用一些CSS来进行样式设置。 - lostInTheTetons

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

已在Firefox和Safari上测试。

- imbondbaby

---

好主意，imbondbaby。 - Suganth G

所以你打算接受答案，然后再取消接受吗？ - imbondbaby