子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。如果您有疑虑，请告诉我。

查看下面的小提琴。

Fiddle

<强> CSS

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

Answer 2

将overflow:hidden;设置为您的父div，将overflow-x: auto;设置为您的子div。

Answer 3

您只需停用html或body元素的滚动即可。不完全确定你想做什么，但要么是#parent元素。

html,body{
    overflow:hidden;
}

或

#parent{
    overflow:hidden;
}

此外，您现在#div2比大多数屏幕更宽，因此您可能无法获得滚动条，因此您可能打算滚动#parent元素？

此外，将overflow设置为auto而不是scroll就足够了scroll只需强制滚动条可见，即使没有要滚动的内容也是如此。