子div可水平滚动，但可修复父窗口

Question

我有一个html，css问题。 我想使子div水平滚动，但父窗口不可滚动。

当前，以下是代码。

<div id="parent">
    <div id="div1">
        ...
    </div>

    <div id="div2" style="overflow-x:scroll; width:2000px">
        <img src="1.png"/>
        <img src="2.png"/>
        <img src="3.png"/>
        <img src="4.png"/>
        <img src="5.png"/>
        <img src="6.png"/>
        <img src="7.png"/>
    </div>
</div>

但是，当滚动div2时，它将使整个窗口滚动。

以下是示意图。

有人知道吗？

Answer 1

要使其溢出，内容必须大于div，而不是div本身。 为了能够内联，必须使用display:inline-block和white-space: nowrap 。 如果您有任何疑问，请告诉我。

查看下面的小提琴。

小提琴

CSS

#div2{
    display:inline-block;
    white-space: nowrap;
}

Answer 2

设置overflow:hidden; 到您的父div和overflow-x: auto; 给你的孩子

Answer 3

您可以简单地禁用html或body元素的滚动。 不能完全确定这是您想要执行的操作，但是不能完全确定是#parent元素。

html,body{
    overflow:hidden;
}

要么

#parent{
    overflow:hidden;
}

另外，现在您的#div2比大多数屏幕都宽，因此您可能不会获得滚动条，因此您可能打算滚动#parent元素？

另外它足以设置overflow到auto ，而不是scroll的scroll只是强制滚动条是可见的，即使是没有内容的滚动。