Question

可见滚动条问题的suggested solution在以下情形中不起作用：

CSS：

#hider {
    position:absolute;
    top: 0;
    left:0;
    height: 400px;
    width: 200px;
    background-color: green;
    overflow: hidden;
}

#scroller {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding-right: 20px;
    padding-bottom: 20px;
    overflow: auto;
}

#content {
    float: left;
    height: auto;
    width: auto;
}

HTML：

<div id="hider">
    <div id="scroller">
        <div id="content">
            xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </div>
    </div>
</div>

我遇到的问题是width事先无法预知<div id="content"></div>，这就是为什么我需要将其设置为auto。

在这种情况下，滚动条仍然隐藏，滚动仍然有效，但有一个小的“故障”：

如果您一直向右滚动，您会注意到<div id="content"></div>的最后一位被切断。

更具体地说，隐藏在右侧的<div id="content"></div>部分的宽度等于应用于<div id="scroller"></div>的右边距的宽度。这很奇怪。

为什么会这样，我该如何解决？

提前感谢您的帮助！

Answer 1

给padding-right #content课程似乎可以解决问题。

#content {
    padding-right: 10px; /* increase or decrease */
    /* other styles */
}

<强> Working Fiddle

当内容宽度为自动时，隐藏滚动条（仍然能够滚动）不起作用

1 个答案: