首頁  >  文章  >  web前端  >  優化滾動的小技巧:使用CSS Scroll Snap! !

優化滾動的小技巧:使用CSS Scroll Snap! !

青灯夜游
青灯夜游轉載
2021-01-18 09:30:313295瀏覽

優化滾動的小技巧:使用CSS Scroll Snap! !

(學習影片分享:css影片教學

你是否經常希望有一個CSS特性可以輕鬆創建一個可捲動的容器? CSS scroll snap 可以做到這一點。在早期的前端開發中,我依賴 JS 外掛程式來建立滑桿元件。有時,我們需要一種簡單的方法來快速將元素製作成可滾動的容器。現在,多虧了 CSSS scroll snap ,我們可以簡單做到這一點。

為什麼要使用 CSS Scroll Snap

隨著行動裝置和平板裝置的興起,我們需要設計和建構可以輕觸的元件。以圖庫組件為例。使用者可以輕鬆地向左或向右滑動以查看更多圖像,而不是分層結構。

優化滾動的小技巧:使用CSS Scroll Snap! !

根據CSS規範,為開發者提供良好控制的捲動體驗是引入 CSS scroll snap的主要原因之一。它增強了用戶體驗,並使其更容易實現滾動體驗。

滾動容器的基礎知識

要建立一個滾動容器,以下是我們需要做的基本內容

  • 使用overflow
  • 一種將項目彼此相鄰顯示(內聯)的方法

舉例:

<div>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>
.section {
  white-space: nowrap;
  overflow-x: auto;
}

多年來,使用white-space: nowrap 是一種流行的CSS解決方案,用於強制元素保持內聯。不過,現在我們基本上都使用 Flexbox :

.section {
  display: flex;
  overflow-x: auto;
}

優化滾動的小技巧:使用CSS Scroll Snap! !

#這是建立捲動容器的基本方法。然而,這還不夠,這不是一個可用的滾動容器。

滾動容器有什麼問題

問題是,與滑動相比,它們並不能提供良好的體驗。在觸控​​螢幕上滑動手勢的主要好處是,我們可以用一根手指水平或垂直滾動。

優化滾動的小技巧:使用CSS Scroll Snap! !

實際上需要將每個項目移到它自己的位置。這並不是滑動,這是一種非常糟糕的體驗,透過使用CSS scroll snap,我們可以透過簡單地定義snap points來解決這個問題,它將使用戶更容易地水平或垂直滾動。

接著,我們來看看如何使用CSS scroll snap

CSS Scroll Snap 簡介

要在容器上使用scroll snap,它的子項目應該內聯顯示,這可以用我上面解釋的方法之一來實現。我選擇CSS flexbox:

<div>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>
.section {
  display: flex;
  overflow-x: auto;
}

了這個,我們需要添加另外兩個屬性來讓scroll snap工作。我們應該在哪裡添加它們?

首先,我們需要將scroll-snap-type添加到滾動容器中。在我們的範例中,是.section元素。然後,我們需要在子項(即.section__item)中加入scrolln-snap-align

.section {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.section__item {
  scroll-snap-align: start;
}

這裡你可能想知道x mandatorystart#是乾嘛用的。別擔心,這是本文的核心,以下將其進行深入的講解。

優化滾動的小技巧:使用CSS Scroll Snap! !

這一刻,我對CSS scroll snap非常興奮,它使滾動更加自然。現在,讓我們深入研究scroll snap 屬性。

Scroll Snap Type

根據CSS規範,scroll-snap-type 屬性定義在滾動容器中的一個臨時點(snap point)如何被嚴格的執行。

滾動容器的軸線

滾動容器的軸表示滾動方向,它可以是水平或垂直的,x值表示水平滾動,而y表示垂直滾動。

/* 水平*/
.section {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x;
}

/* 垂直*/
.section {
  height: 250px;
  overflow-y: auto;
  scroll-snap-type: y;
}

優化滾動的小技巧:使用CSS Scroll Snap! !

Scroll Snap 容器的嚴格性

我們不僅可以定義Scroll Snap的方向,還可以定義它的嚴格程度。這可以透過使用scroll-snap-type值的andatory | proximity來實現。

mandatory:如果它目前沒有被捲動,這個滾動容器的視覺視圖將會靜止在暫存點上。意思是當滾動動作結束,如果可能,它會臨時在那個點上。如果內容被添加、移動、刪除或重置大小,滾動偏移將被調整為保持靜止在臨時點上。

mandatory關鍵字意味著瀏覽器必須捕捉到每個滾動點。假設roll-snap-align屬性有一個start值。這意味著,滾動必須對齊到滾動容器的開始處。

在下图中,每次用户向右滚动时,浏览器都会将项目捕捉到容器的开头。

優化滾動的小技巧:使用CSS Scroll Snap! !

.section {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.section__item {
  scroll-snap-align: start;
}

優化滾動的小技巧:使用CSS Scroll Snap! !

试着在下面的演示中向右滚动。如果你使用的是手机或平板电脑,可以向右移动滚动条或使用触摸。应该能感受到每个项目是如何从其容器的开始抓取的。

演示地址:https://codepen.io/shadeed/pen/RwGaXKB

但是,如果该值是proximity,则浏览器将完成这项工作,它可能会吸附到定义的点(在我们的例子中start)。注意,proximity 是默认值,但是为了清晰起见,我们这里还是声明一下它。

優化滾動的小技巧:使用CSS Scroll Snap! !

.section {
  display: flex;
  overflow-x: auto;
  /* proximity is the default value, I added it for clarity reasons */
  scroll-snap-type: x proximity;
}

優化滾動的小技巧:使用CSS Scroll Snap! !

Scroll Snapping Alignment

滚动容器的子项目需要一个对齐点,它们可以对齐到这个点。我们可以用start, centerend

为了更容易理解,下面是它的工作原理。

優化滾動的小技巧:使用CSS Scroll Snap! !

假设我们在滚动容器上有一块磁铁,这将有助于我们控制捕捉点。 如果scroll-snap-type是垂直的,则对齐对齐将是垂直的。 参见下图:

1優化滾動的小技巧:使用CSS Scroll Snap! !

滚动容器的 start

子项目将吸附到其水平滚动容器的开始处。

優化滾動的小技巧:使用CSS Scroll Snap! !

滚动容器的 center

子项目将吸附到其滚动容器的中心。

1優化滾動的小技巧:使用CSS Scroll Snap! !

滚动容器的 end

子项将对齐到其滚动容器的末尾。

1優化滾動的小技巧:使用CSS Scroll Snap! !

使用 Scroll-Snap-Stop

有时,我们可能需要一种方法来防止用户在滚动时意外跳过一些重要的项。如果用户滚动太快,就有可能跳过某些项。

.section__item {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

法动太快可能会跳过三个或四个项目,如下所示:

優化滾動的小技巧:使用CSS Scroll Snap! !

scroll-snap-stop的默认值是normal,要强制滚动捕捉到每个可能的点,应使用always

.section__item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

優化滾動的小技巧:使用CSS Scroll Snap! !

这样,用户可以一次滚动到一个捕捉点,这种方式有助于避免跳过重要内容。 想象每个停止点都有一个停止标志,参见下面的动画:

1優化滾動的小技巧:使用CSS Scroll Snap! !

演示地址:https://codepen.io/shadeed/pen/JjRbXza

Scroll Snap Padding

scroll-padding设置所有侧面的滚动边距,类似于padding属性的工作方式。 在下图中,滚动容器的左侧有50px的内边距。 结果,子元素将从左侧边缘捕捉到50px

1優化滾動的小技巧:使用CSS Scroll Snap! !

直滚动也是如此。参见下面的示例:

.section {
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-padding: 50px 0 0 0;
}

優化滾動的小技巧:使用CSS Scroll Snap! !

Scroll Snap Margin

scroll-margin设置滚动容器的子项之间的间距。 在向元素添加边距时,滚动将根据边距对齐。 参见下图:

優化滾動的小技巧:使用CSS Scroll Snap! !

.item-2具有scroll-margin-left: 20px。 结果,滚动容器将在该项目之前对齐到20px。 请注意,当用户再次向右滚动时,.item-3会捕捉到滚动容器的开头,这意味着仅具有边距的元素将受到影响。

CSS Scroll Snap 用例

图片列表

scroll snap  的一个很好的用例是图像列表,使用 scroll snap 提供更好的滚动体验。

2優化滾動的小技巧:使用CSS Scroll Snap! !

.images-list {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x;
  gap: 1rem;
  -webkit-overflow-scrolling: touch; /* Important for iOS devices */
}

.images-list img {
  scroll-snap-align: start;
}

注意,我使用x作为scroll-snap-type的值。

優化滾動的小技巧:使用CSS Scroll Snap! !

事例地址:https://codepen.io/shadeed/pe...

好友清单

滚动捕捉的另一个很好的用例是朋友列表。 下面的示例摘自Facebook(一个真实的示例)。

優化滾動的小技巧:使用CSS Scroll Snap! !

.list {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  scroll-padding: 48px;
  padding-bottom: 32px;
  -webkit-overflow-scrolling: touch;
}

.list-item {
  scroll-snap-align: start;
}

请注意,滚动容器的padding-bottom:32px。 这样做的目的是提供额外的空间,以便box-shadow可以按预期显示。

優化滾動的小技巧:使用CSS Scroll Snap! !

头像列表

对于此用例,我感兴趣的是将center作为scroll-snap-align的值。

2優化滾動的小技巧:使用CSS Scroll Snap! !

.list {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.list-item {
  scroll-snap-align: center;
}

这在一个角色列表中是很有用的,角色在滚动容器的中间是很重要的

優化滾動的小技巧:使用CSS Scroll Snap! !

演示地址:https://codepen.io/shadeed/pen/KKgMJWa

全屏展示

使用scroll snap也可以用于垂直滚动,全屏展示就是一个很好的例子。

優化滾動的小技巧:使用CSS Scroll Snap! !

<main>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</main>
main {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

.section {
  height: 100vh;
  scroll-snap-align: start;
}

優化滾動的小技巧:使用CSS Scroll Snap! !

块和内联

值得一提的是,对于scroll-snap-type,可以使用inlineblock逻辑值。参见下面的示例

main {
  scroll-snap-type: inline mandatory;
}

可读性

使用 CSS scroll snap时,请确保可访问性。 这是滚动对齐的一种不好用法,它阻止用户自由滚动内容以读取内容。

.wrapper {
  scroll-snap-type: y mandatory;
}

h2 {
  scroll-snap-align: start;
}

優化滾動的小技巧:使用CSS Scroll Snap! !

優化滾動的小技巧:使用CSS Scroll Snap! !

请务必不要这样做。

总结

这是我刚刚学到的一个新的CSS特性的长篇文章。我希望它对你有用。

原文地址:https://ishade.com/article/css-scroll-snap/

作者:Ahmad

译文地址:https://segmentfault.com/a/1190000038459089

更多编程相关知识,请访问:编程入门!!

以上是優化滾動的小技巧:使用CSS Scroll Snap! !的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除