有時候需要為移動設備上的列表做一個水平滾動的效果，其實很方便，可以用CSS來實現。

例如，你可以在水平導航欄中表示不同的類別，并且可以為每個類別分配一個鏈接，讓用戶可以直接跳轉到不同的頁面。

當你想要顯示屬于異構集的同質內容的子集時，水平列表效果最佳。

橫向滾動效果的好處是讓網站訪問者在使用移動設備時更容易橫向瀏覽某些內容，而且頁面不會因為內容過多而顯得繁瑣，例如很多列表等。

在下文中，我將創建一個簡單的示例來實現這一點。

效果

demodownload

實現方法：

1. 創建一個包含項目的容器
2. 將容器逆時針旋轉 90 度，使底部向右
3. 將項目旋轉??回正確的一面

步驟 1) 設置容器

制作一個<div>，并制作一堆子元素。

在這個例子中，我們的橫向滾動容器將是 300px 寬，有 8 個 100×100px 的項目。這些是任意大小；他們可以是任何東西。

<div class="horizontal-scroll-wrapper squares">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
  <div>item 7</div>
  <div>item 8</div>
</div>

容器的高度將變為“寬度”，反之亦然。所以下面，我們容器的“寬度”將是 300px：

.horizontal-scroll-wrapper {
  width: 100px;
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

子元素：

.horizontal-scroll-wrapper > div {
  width: 100px;
  height: 100px;
}

步驟 2) 旋轉容器

現在我們使用 CSS 將容器旋轉 -90 度transform。你有它：一個水平滾動條。

.horizontal-scroll-wrapper {
  ...
  transform: rotate(-90deg);
  transform-origin: right top;
}

步驟 3) 讓子元素恢復直立

我們將如何讓子元素重新直立起來？使用另一個相反的 CSS 將它們旋轉回來。

.horizontal-scroll-wrapper > div {
  ...
  transform: rotate(90deg);
  transform-origin: right top;
}

Step 4) 定位固定

它開始看起來不錯，但仍然存在一些問題。

通過使用右上角作為錨點旋轉包裝器，我們的左側移動了容器的寬度。如果你覺得這很難理解，只需將手指放在頁面的右上角并旋轉即可。解決方案：將其移回translateY。

但由于物品發生了同樣的現象，第一項丟失了，我發現的最簡單的方法是在包裝器中添加一個與項目寬度相等的頂部填充，為項目創建一種緩沖區。

.horizontal-scroll-wrapper {
  ...
  transform:rotate(-90deg) translateY(-100px);
  ...
}

總結

本文介紹了純 CSS 實現水平（橫向）滾動列表的方法，雖然用JavaScript也同樣能實現，都能據了解，更多用戶是支持純CSS的。

標簽: css  水平滾動