除了無障礙設計、獨特的調色盤和迷人的視覺效果之外，您是否想過是什麼造就了美好的網路體驗？那就是流暢的導航。在網頁設計的世界裡，沒有什麼功能能比無縫導航更好地為使用者提供無懈可擊的網頁體驗了。從簡化互動到減少網路挫敗感，建立易於導航的網站已成為現代網路的新潮流。本文將向你展示如何解鎖 CSS 的滾動快照 scroll snaps，以產生更好的使用者體驗。
雖然大多數網站開發人員都認為建立易於瀏覽的網站令人生畏，但我們希望通過深入瞭解 CSS 滾動快照的世界並利用它們實現直觀的網站導航，讓這項任務不再那麼可怕。
本教學結束後，你就可以運用滾動快照知識建立無縫滾動的網頁，就像下面展示的圖片旋轉木馬一樣。
上面的視訊介紹了將 scroll snaps 應用於圖片旋轉木馬的概念。通過觀察，你會發現滾動是如何以精確的時間間隔停止的，從而在旋轉木馬中提供平滑、可控的移動。
什麼是滾動快照？
Scroll snap（滾動快照）是一種 CSS 功能，它為開發人員提供了控制滾動容器定位的槓桿。當網路使用者滾動瀏覽網頁時，網頁會停在使用者停止滾動的位置。然而，利用 CSS 的 scroll snap 功能，網頁會在開發人員指定的容器內的特定點停止。這些點被稱為卡點，其主要功能是作為滾動容器內的位置，確保滾動在指定位置對齊。通過在網站中使用 scroll snap 功能，網頁開發人員可以將滾動容器中的每個元素與特定的快照點關聯起來，確保滾動在這些位置結束。
有兩個屬性與控制網站的滾動行為相關。它們是 scroll-snap-type 和 scroll-snap-align 屬性。
Scroll-snap-type 屬性
Scroll-snap-type 是一種 CSS 屬性，通常在網頁的父元素或容器元素中指定，用於定義網頁的滾動行為。該屬性的語法包含兩個值–第一個值代表滾動方向，第二個值定義滾動行為。
語法
.container {
scroll-snap-type: x/y/both none/mandatory/proximity;
}
滾動方向
滾動方向定義了應用 scroll-snap-type 屬性的方向。它包含三個可能的值，分別是
-
X值： 該值將scroll-snap-type屬性應用於水平方向。 -
Y值： 該值將scroll-snap-type屬性應用於垂直方向。 -
Both值： 該值在水平和垂直方向上應用scroll-snap-type屬性。
其他可能的滾動方向值包括：
Inline值： 將scroll-snap-type屬性應用於內聯方向。Block值： 將scroll-snap-type屬性應用於塊方向。
滾動行為
滾動行為定義了應用於網頁的 scroll-snap 型別。與滾動方向類似，滾動行為也包含三個值。它們是
None值：這是scroll-snap-type屬性的預設值，表示在網頁上不應用任何滾動行為。Mandatory值：mandatory值確保無論使用者滾動到哪個位置，元素都會自動滾動到滾動點。這是一個非常嚴格的scroll-snap-type屬性值。Proximity值：proximity值具有與mandatory值類似的功能。不過，它是一種不太嚴格的scroll-snap-type屬性值。
Scroll-snap-align 屬性
scroll-snap-align 是應用於滾動容器中子元素/子元素的 CSS 屬性，它決定了每個專案在特定快照點內的對齊方式。它決定滾動停止時每個容器元素對焦的位置。
語法
.panel {
scroll-snap-align: none/start/center/end;
}
該屬性有四種可能的值，它們是：
None值：這是scroll-snap-align屬性的預設值，表示不對元素應用滾動對齊效果。Start值：此值用於在元素的起始位置為水平和垂直滾動應用scroll snap效果。Center值：該值在元素中心應用scroll snap效果。End值：此值用於在元素結束時為水平和垂直滾動應用scroll snap效果。
建立水平和垂直快照點
在探索 scroll snaps 的過程中，我們已經瞭解了它們的基本屬性：scroll-snap-type 和 scroll-snap-align。接下來，我們將把這些知識轉化為實際的水平和垂直滾動應用，同時將它們整合到 flexbox 佈局和網格容器中。在整個過程中，我們將調整 HTML 和 CSS 檔案，以建立引人入勝的產品展示。
一般 HTML 標記
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div class="container"> <div class="panel"> <img src="./im/pexels-terrance-barksdale-10112911.jpg" alt="" /> </div> <div class="panel"> <img src="./im/icee-dc-PvObYzFkTAE-unsplash.jpg" alt="" /> </div> <div class="panel"> <img src="./im/pexels-grailify-8871471.jpg" alt="" /> </div> <div class="panel"> <img src="./im/chris-henry-tV8yaU09t7w-unsplash.jpg" /> </div> <div class="panel"> <img src="./im/pexels-jonathan-garcìa-8490975.jpg" alt="" /> </div> </div> </body> </html>
我們的 HTML 標記包含六個 div 標記。第一個是帶有 container 類的 div 標籤。這個 div 標籤是父元素，它包含其餘的 div 標籤：<div class= "panel"></div> 是其子元素。
效果如下：
上述視訊展示了未應用 scroll snap 的網頁行為。請注意，當滾動停止時，每個面板都會停止，而不會彈出。
在設定好 HTML 標記後，我們就可以進入 CSS 檔案了。
水平滾動的 CSS 標記
我們將在 CSS 標記的 grid 容器中設定水平滾動。為此，我們要將父元素的顯示設定為 grid 。程式碼如下
/*sets the style for the entire webpage, giving the page zero margin and padding*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*sets the background color of the entire webpage to black*/
body {
background: black;
}
/*sets the display of the parent element to grid and sets the scroll-snap-type to x mandatory,
lays the elements of the container over a background image,
sets the margin of the container to auto, thereby placing container element at the center of the webpage*/
.container {
background: url(./im/pexels-terrance-barksdale-10112911.jpg);
display: grid;
grid-template-columns: repeat(5, 100%);
width: 90vw;
height: 90vh;
overflow-x: scroll;
margin: auto;
margin-top: 40px;
scroll-snap-type: x mandatory;
}
/*gives each child element a width of 100% and height of 100vh, while setting the scroll-snap-align property to start*/
.panel {
width: 100%;
height: 100vh;
scroll-snap-align: start;
}
/*gives each image a width and height of 100%*/
.panel img {
width: 100%;
height: 100%;
object-fit: contain;
}
在上述程式碼中，我們使用 * 語法設定了整個網頁的樣式。我們將 margin 和 padding 設定為零，將 box-sizing 屬性設定為 border box。box-sizing 屬性的本質是確保元素在設定 padding 時不會佔用額外空間。接下來，我們將網頁的背景顏色設定為黑色。
為了實現 scroll snap 功能，我們對 “container” 元素應用樣式，將其顯示設定為網格。容器的寬度和高度分別為 90vw 和 90vh 。這是為了防止容器元素佔滿整個螢幕。為了將容器元素置於頁面中心，我們將其 margin 設定為 auto， margin-top 設定為 40px 。
對於子元素，我們將其寬度和高度分別設定為 100% 和 100vh。此外，我們還將 scroll-snap-align 屬性設定為 start。這樣就實現了滾動對齊。
請注意，每張圖片的 width 和 height 均為 100%，height 屬性設定為 contain。
還要注意的是，overflow-x 屬性的值為 scroll，而 scroll-snap-type 屬性的值為 x。
效果如下：
在上面的視訊中，我們展示了水平 scroll snaps 在產品展示中的應用。每個產品都在其面板中展示，水平 scroll snaps 無縫地引導使用者瀏覽各種產品。
垂直滾動的 CSS 標記
我們將在 CSS 標記的 flex 容器中設定垂直滾動。為此，我們將在父元素中新增一個 flex display，並將子元素的 flex 屬性設定為 none。程式碼如下
/*sets the style for the entire webpage, giving the page zero margin and padding*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*sets the background of the entire webpage*/
body {
background: url(./im/pexels-terrance-barksdale-10112911.jpg);
}
/*sets the display of the parent element to flex and sets the scroll-snap-type to y mandatory*/
.container {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
/*gives each child element a width of 100% and height of 100vh, while setting the scroll-snap-align property to start*/
.panel {
flex: none;
width: 100%;
height: 100vh;
scroll-snap-align: start;
}
/*gives each image a width of 100% and height of 90%*/
.panel img {
margin-top: 40px;
width: 100%;
height: 90%;
object-fit: contain;
}
與水平滾動類似，我們使用 * 語法為垂直滾動設定整個網頁的樣式。我們將 margin 和 padding 設定為零，將 box-sizing 屬性設定為 border box。
接下來，我們將對 “container” 元素應用樣式，並將其顯示設定為 flex，從而在網頁上實現 scroll snap 功能。容器的寬度和高度分別為 100% 和 100vh。我們還將 overflow-y 屬性設定為 scroll。此功能可實現垂直滾動。為了實現滾動快照，我們將 scroll-snap-type 設定為 y mandatory。
對於子元素，我們將其寬度和高度分別設定為 100% 和 100vh。此外，我們還將 scroll-snap-align 屬性設定為 start。
請注意，每張圖片的 width 和 height 分別為 100% 和 90%，object-fit 屬性設定為 contain。
效果如下：
在上述視訊中，我們在產品展示中使用了垂直 scroll snaps 。目錄中的每個專案都按垂直順序排列，並在其垂直面板中清晰呈現。垂直 scroll snap 建立了一種引導式導航體驗，讓使用者能夠以可控的方式流暢地滾動瀏覽產品系列。
高階滾動快照技術
到目前為止，我們已經在 flexbox 佈局和 grid 容器中設定了水平和垂直滾動，確保了流暢的滾動體驗。不過，我們還可以進一步新增特定屬性，幫助微調滾動行為，增強使用者的網路體驗。這些屬性就是 scroll-padding 和 scroll-margin。
Scroll-padding 屬性
scroll-padding 屬性允許控制滾動容器內的間距。這意味著，當使用者滾動頁面時，如果移動停止，頁面會迅速調整，在容器與焦點子元素的快照位置之間的指定距離處停止。
語法
.container {
scroll-padding: 50px;
}
Scroll-padding 的語法與常規 padding 屬性類似，是其他四個屬性的簡稱，它們是
Scroll-padding-top:：該屬性控制滾動容器頂部的間距。Scroll-padding-bottom：該屬性控制滾動容器底部的間距。Scroll-padding-left：該屬性控制滾動條左側的間距。Scroll-padding-right：該屬性控制滾動條容器右側的間距。
要有效實現滾動載入，必須在子元素上設定 scroll-snap-align 屬性，而 scroll-padding 和 scroll-snap-type 屬性必須放在父元素上。
Scroll-margin 屬性
scroll-margin 屬性是控制快照位置和滾動容器邊緣之間空間的功能。這意味著一旦停止滾動，滾動就會調整並停止在快照位置和容器之間的指定距離。
Syntax
.panel {
scroll-margin: 50px;
}
Scroll-margin 屬性是其他四個值的速記屬性。它們是
Scroll-margin-top：設定快照位置與滾動容器頂部之間的邊距。Scroll-margin-bottom：設定快照位置與滾動容器底部之間的邊距。Scroll-margin-left：設定快照位置與滾動框左側之間的邊距。Scroll-margin-right：設定快照位置與滾動容器右側之間的邊距。
要有效應用 scroll-margin 屬性，必須在子元素上設定 scroll-margin 和 scroll-align 屬性，而 scroll-snap-type 屬性必須在父元素上設定。
CSS 滾動快照的實際應用
到目前為止，毫無疑問，CSS 滾動快照是每個現代網站不可或缺的強大功能，因為它能提供平滑、可控的滾動行為，從而改善使用者體驗。下面，我們將深入探討 CSS 滾動快照在現實世界中的一些應用。
- 圖片庫和旋轉木馬：圖片庫和旋轉木馬利用 CSS 滾動快照提供流暢且具有視覺吸引力的瀏覽體驗。當使用者滾動瀏覽圖片集時，在該功能的幫助下，每張圖片都會與視口保持一致，從而實現無縫過渡。這可進一步確保使用者將注意力集中在單張圖片上，而不會被部分檢視分散注意力。
- 響應式網頁設計：CSS 滾動快照的另一個出色應用是建立響應式網頁設計。當使用者瀏覽網站時，滾動咬合可確保各部分整齊地咬合到檢視中，並與視口保持一致。這樣，無論是在智慧手機、平板電腦還是桌上型電腦上，都能保證佈局的一致性和視覺美感。
- 互動式地圖：在互動式地圖中，CSS 滾動快照功能使地圖生動活潑，引導使用者在虛擬旅程中瀏覽多個地點。當使用者瀏覽地圖時，該功能可使地圖平滑過渡到興趣點，提供獨特的探索體驗。
- 產品展示：電子商務網站利用滾動快照的強大功能，以井然有序的格式展示其產品。當使用者滾動瀏覽產品目錄時，每件產品都能與視口完美對齊，讓客戶能夠專注於單個產品，同時避免分心。
小結
CSS 滾動快照為建立無縫導航網站提供了一種前景廣闊的方法。通過定義快照點，開發人員可以改善使用者體驗，使滾動更加流暢，減少挫敗感。無論是應用於建立圖片庫還是互動式地圖，CSS 滾動快照功能都能無縫地改善使用者導航，從而創造出更身臨其境、更完美的網路體驗。
評論留言