隱藏寬度較大的div的水平屏幕外溢出

Question

如何隱藏設置了較大寬度的<div>的水平，屏幕外溢出？ 例如：

HTML：

<div class="example">
</div>

CSS：

.example {
  height: 100px;
  width: 10000px;
  background-color: black;
  position: absolute;
  overflow: hidden;
}

這是一個示例小提琴 ，它顯示了滾動條的出現，但我希望如果div這樣大，就不會發生這種情況。

編輯 ：在父元素上添加隱藏的溢出-x在小寬度的iOS設備上不起作用。

Answer 1

您可以設置overflow: hidden在元素容器上。 在這種情況下，就是身體。

body {
  overflow: hidden;
}

Answer 2

你快到了！

設置overflow了的.example類只躲在這里面的任何溢出的內容，雖然。

您需要設置.example的父容器的overflow ，以使其正常工作-即它位於其中的任何容器。

---

如您在OP中所述，您想隱藏水平滾動條。

為此，您需要設置

overflow-x: hidden

但是（如前所述），請確保這在.example的父容器上。

這可能是body或另一個div等。

例如：

body, .parent-container {
    overflow-x: hidden;
}

Answer 3

您可以使用CSS中overflow-x: hidden僅overflow-x: hidden水平滾動。