css - 没有滚动条的溢出滚动

Question

如何创建一个具有最大宽度/高度的 div，而不是让 scollbars 什么都没有但仍然能够滚动？（通常通过鼠标滚轮、选择文本并向下移动鼠标或向下箭头完成）

我试过隐藏，但这不允许我滚动。其他选项要么不允许它具有最大高度，要么放置滚动条。

这是一个示例演示。我希望没有滚动条但能够看到 eof。

<div id=main>
    Text text text text text text text text...
    Text text text text text text text text...
    eof
</div>

#main {
    max-height: 400px;
    /*overflow: auto;*/
    overflow: hidden;
} 

Answer 1

将滚动条推入隐藏区域怎么样？

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
}
#container {
    position: absolute;
    left: 0;
    top: 0;
    right: -30px;
    bottom: 0;
    padding-right: 15px;
    overflow-y: scroll;
    max-height: 400px;
}

JSF中。

来自 SO-Hide 滚动条的示例，但保留以原生感觉滚动的能力。

Answer 2

对于支持 web kit 引擎的浏览器（如 Chrome），您可以使用它

#main ::-webkit-scrollbar 
{
    width: 0px;
}

但对于其他浏览器，你需要别的东西。