卡卡網(wǎng)

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

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

當(dāng)你想要顯示屬于異構(gòu)集的同質(zhì)內(nèi)容的子集時，水平列表效果最佳。

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

在下文中，我將創(chuàng)建一個簡單的示例來實現(xiàn)這一點。

效果

demodownload

實現(xiàn)方法：

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

步驟 1) 設(shè)置容器

制作一個<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>

容器的高度將變?yōu)?ldquo;寬度”，反之亦然。所以下面，我們?nèi)萜鞯?ldquo;寬度”將是 300px：

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

子元素：

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

步驟 2) 旋轉(zhuǎn)容器

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

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

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

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

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

Step 4) 定位固定

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

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

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

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

總結(jié)

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

標(biāo)簽: css  水平滾動