卡卡網(wǎng)

水平滾動組件的設(shè)計在移動設(shè)備上變得尤為常見，有助于降低密集頁面的垂直高度。本文介紹如何用純CSS創(chuàng)建水平滾動DIV容器。

效果

demodownload

我們的目標(biāo)是用最少的代碼創(chuàng)建一個水平滾動條，并在所有類型的設(shè)備上按預(yù)期工作。

讓我們首先創(chuàng)建我們的容器和在其中水平滾動的子 div。HTML 非常簡單。

<div class="scrolling-wrapper"> 
  <div class="card"><h2>卡片</h2></div> 
  <div class="card"><h2>卡片</h2></div> 
  <div class="card"><h2>卡片</h2></div> 
  <div class="card"><h2>卡片</h2></div> 
  <div class="card"><h2 >卡片</h2></div> 
  <div class="card"><h2>卡片</h2></div> 
  <div class="card"><h2>卡片</h2></div> 
  <div class="card"><h2>卡片</h2></div> 
  <div class="card"><h2>卡片</h2></div> 
</div>

有兩種不同的方法可以使這些 div 水平滾動，你的選擇取決于個人喜好和/或瀏覽器支持。

white-space 方法

這是我們需要的所有 CSS，沒有 jQuery，只是簡單地使用了溢出和一個你可能沒聽說過的屬性。

.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;

  .card {
    display: inline-block;
  }
}

在我們的容器上，我們想要關(guān)閉垂直滾動（overflow-y）并啟用水平滾動（overflow-x）。然后對于每張卡片，我們希望將其設(shè)置為使用 inline-block 顯示，以便它們都顯示在一行中。

你可能不熟悉的 CSS 行是 white-space: nowrap。此屬性用于控制文本環(huán)繞容器的方式。在這種情況下，我們希望使用 nowrap 禁用該包裝。

四行 CSS 屬性，我們得到了一個水平滾動容器。

至于瀏覽器支持？這是完美的。除非你關(guān)心 Internet Explorer 或 Edge。微軟表示，他們可能會將其包含在 Edge 的未來版本中。但目前，它不可用。

Flexbox 方法

Flexbox 也可以為我們解決這個問題。

.scrolling-wrapper-flexbox {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;

  .card {
    flex: 0 0 auto;
  }
}

本質(zhì)上，我們使用 flex-wrap 來實(shí)現(xiàn)與上面的 white-space 相同的效果。這兩個屬性在做什么之間沒有真正的區(qū)別。

瀏覽器支持更適合 flexbox 解決方案。你可能需要為舊版瀏覽器引入一些供應(yīng)商前綴，但至少此解決方案適用于 IE 和 Edge。

溢出滾動(overflow-scrolling)

如果你上下滾動，iOS 上的網(wǎng)頁會滾動。如果你快速向上或向下滑動手指，則松開后頁面將繼續(xù)滾動。如果你到達(dá)頁面的頂部或底部，頁面將在彈回原位之前彈回包裝器的末端。

對于水平元素，默認(rèn)情況下，我們不會有那么平滑的滾動。

幸運(yùn)的是，它很容易打開。請記住，雖然前綴是 webkit，但這在 iOS 上最為明顯。

.scrolling-wrapper { 
  -webkit-overflow-scrolling: touch; 
}

現(xiàn)在我們在水平容器上進(jìn)行了黃油般的平滑滾動。這是一個看起來像的例子：

滾動條

默認(rèn)情況下，具有滾動內(nèi)容的容器將具有滾動條。但是，如果我們不希望那里的滾動條用于 UX 或設(shè)計目的怎么辦？那也很簡單。但是，這僅適用于 webkit 瀏覽器。

.scrolling-wrapper {
  -webkit-overflow-scrolling: touch;
}

總結(jié)

隨著這成為一種更常見的設(shè)計，將這些片段歸檔是明智的，因為你可能會一遍又一遍地需要它們。很棒的是因為這非常簡單，你可以將其包裝在媒體查詢中并僅針對某些設(shè)備顯示水平滾動條。沒有 jQuery 或任何雜亂的東西讓人頭疼。

相關(guān)文章

• 如何用JavaScript創(chuàng)建水平(橫向)滾動列表
• 純CSS實(shí)現(xiàn)水平(橫向)滾動列表

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