当内容宽度为自动时，隐藏滚动条（仍能滚动）不工作 [英] Hiding scrollbars (still able to scroll) not working when content width is auto

问题描述

借助建议的解决方案可见滚动条的问题，在下面的情况下不工作：

The suggested solution to the problem of visible scrollbars does not work in the below scenario :

的jsfiddle

JSFIDDLe

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 $ c> auto 。

The problem I'm having is that the width of <div id="content"></div> cannot be known beforehand in my case, that's why I need to set it to auto.

在这种情况下，滚动条仍然隐藏，滚动仍然有效，但有一个小的毛刺

In that case, the scrollbars are still hidden and the scrolling still works but there is one small "glitch" :

如果您向右滚动，您会注意到< div id =content> < / div> 被切断。

If you scroll all the way to the right, you'll notice that the last bit of <div id="content"></div> is cut off.

更具体地说，< div id =content>< / div> < div id =scroller>< / div> 的右侧填充的宽度。这很奇怪。

More specifically, the width of the part of <div id="content"></div> that is hidden on the right is equal to the width of the right padding applied to <div id="scroller"></div>. This is very weird.

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

Why is that and how do I work around that?

任何帮助！

推荐答案

给予 padding-right 到 #content 类似乎解决了这个问题。

Giving padding-right to #content class seems to solve the problem.

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

工作小提琴

Working Fiddle

这篇关于当内容宽度为自动时，隐藏滚动条（仍能滚动）不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！