卡卡網(wǎng)

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

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

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

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

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

效果

demodownload

實(shí)現(xiàn)方法：

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

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

制作一個(gè)<div>，并制作一堆子元素。

在這個(gè)例子中，我們的橫向滾動(dòng)容器將是 300px 寬，有 8 個(gè) 100×100px 的項(xiàng)目。這些是任意大??；他們可以是任何東西。

<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。你有它：一個(gè)水平滾動(dòng)條。

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

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

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

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

Step 4) 定位固定

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

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

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

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

總結(jié)

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

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