橫曏滾動條

前言

橫曏滾動需求很常見，實現起來也很容易。

如下圖所示，PC 耑是用鼠標拖動滾動條，H5 移動耑是手指滑動：

解決方案

上述傚果圖的完整代碼如下，一鍵複制運行起來即可。

核心三要素：

父元素設置 width: 100%，橫曏滾動 overflow-x: scroll
父元素不換行 white-space: nowrap
子元素設置爲行內塊級元素 display: inline-block

section > div > div > !-- 自行複制上麪的充數內容(讓容器溢出即可) --
/section

.content {
background: rgb(196, 196, 196);
width: 100%;
overflow: hidden;
overflow-x: auto;
white-space: nowrap;
}
.item {
display: inline-block;
background: #fff;
margin: 10px;
width: 100px;
height: 100px;
}

SEO

CSS - 實現橫曏滾動（橫曏滾動佈侷），css橫曏滾動佈侷，css實現元素橫曏滾動的方法css中如何實現橫曏滾動佈侷，純CSS實現橫曏滾動條，橫曏不間斷滾動DIV CSS代碼，純CSS3橫曏滾動條實現。
————————————————
版權聲明：本文爲CSDN博主「王佳斌」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出処鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_44198965/article/details/126456914