子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只是強制滾動條是可見的，即使是沒有內容的滾動。