如何使用瀏覽器滾動進行內部div的x溢出？

Question

我正在嘗試實現一個動態頁面，其結構非常容易超過寬度。我想通過瀏覽器的水平滾動條本身滾動樹，這樣div就不會出現單獨的滾動條。 CSS屬性如下：

body{ 
overflow-x:auto; 
background-color: #ffffff;} 

#campaign { 
width: 100%; 
overflow: auto; 
white-space: nowrap;} 

這是我當前輸出的屏幕截圖。

Output

底部水平滾動滾動時垂直向上消失。

感謝。

Answer 1

您可以在容器div中設置溢出至visible，這將導致內容超出100％寬度範圍並在主體上添加滾動條。

這裏有一個簡單的例子：https://jsbin.com/bejimit/edit?html,css,output

而其CSS：

body { 
    overflow-x: auto; 
} 

#campaign { 
    display: inline-block; 
    width: 100%; 
    overflow: visible; 
    white-space: nowrap; 
} 
.content-item { 
    width: 300px; 
    height: 100px; 
    border: 1px solid red; 
    display: inline-block; 
}