html - 无法隐藏滚动，尽管隐藏了溢出？

Question

<div class="main">
<div class="content">
<div class="left_container">

</div>
</div>
</div>

在上面的代码中，我向 left_container div 添加了一个滚动条。但是我想隐藏它!引用其他问答，发现在父div类中设置了overflow:hidden。

但滚动条仍然没有隐藏在子类中？

CSS:

.content
{
    background-color: white;
    width:100%;
    height:auto;
    margin-top:10%;
    position: absolute;
    overflow: hidden;

}

.left_container
{
    background-color:;
    margin-left:5%;
    margin-top:5%;
    width:70%;
    height:1000px;
    overflow:auto;
}

好吧我也试过把它隐藏在body里!还是行不通..？

Answer 1

其实有一个简单的方法。

.left_container { overflow: hidden }

现在给 left_container 一个子 div 并应用以下样式

.left_container-child {
  height: 100%;
  overflow-x: scroll;
  width: 101%;
}

这样做是将滚动条推到看不见的地方。

你真的想在不同的浏览器上检查一下，确保你的内容不会被切断。

您可以在此处查看一个工作示例(更改 left_container-child 的宽度以尝试将滚动条推出)。 Example