最新案例推薦
點擊查看
掃一掃查看
最新行業案例
最新行業案例
如何讓你的網站擁有精美的滾動體驗
發表于：2019-12-20
在傳統上，web落后于本地平臺在某種程度上體現在應用程序體驗的“流暢性”，其實這種感覺大多來自于用戶界面對用戶交互的響應方式，包括在內容中滾動的行為。
感覺大多來自于用戶界面對用戶交互的響應方式，包括在內容中滾動的行為。 面對web平臺的局限性，開發人員經常接觸JavaScript庫和框架來更改滾動網頁的體驗，如果實現時未充分考慮用戶體驗，則并非是一件好事。更多的庫可能導致頁面膨脹，并降低網站的性能。但是有了相對較新的CSS Scroll Snap規范，我們就可以使用web標準來控制網頁的滾動行為，而無需使用繁瑣的庫。
滾動捕捉
用戶可以通過多種方式來控制網頁的滾動位置，例如使用鼠標，觸摸手勢或箭頭鍵。與線性滾動體驗不同，滾動捕捉規范使網頁可以在用戶滾動時捕捉到特定點。為此，我們需要一個高度固定的元素作為滾動容器，并且該元素的直接子元素將確定捕捉點。
滾動捕捉需要存在兩個主要的CSS屬性：scroll-snap-type和scroll-snap-align。scroll-snap-type適用于滾動容器元素，并接受兩個關鍵字值。它告訴瀏覽器：
? 捕捉方向
? 是否必須執行捕捉
scroll-snap-align應用于子元素下，我們還需要在滾動容器上設置固定高度，并將相關overflow屬性設置為scroll。
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Helvetica', sans-serif;
}
.scroll-container {
height: 100vh;
overflow-y: scroll; scroll-snap-type: y mandatory;
}
section {
height: 100vh;
scroll-snap-align: center;
}
section {
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
background-color: darkorchid;
}
section:nth-child(2n) {
background-color: turquoise;
}
section:nth-child(3n) {
background-color: tomato;
}
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Helvetica', sans-serif;
}
.scroll-container {
height: 100vh;
overflow-y: scroll; scroll-snap-type: y mandatory;
}
section {
height: 100vh;
scroll-snap-align: center;
}
section {
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
background-color: darkorchid;
}
section:nth-child(2n) {
background-color: turquoise;
}
section:nth-child(3n) {
background-color: tomato;
}
如果將滾動容器和每個部分的高度都設置為100vh，這會影響整個網頁的滾動體驗。但滾動捕捉也可以在較小的組件上實現。在x軸上設置滾動捕捉可能會產生諸如輪播的效果。 如下，您也可以水平滾動瀏覽各個部分：
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Helvetica', sans-serif;
}
.scroll-container {
height: 70vw;
max-height: 30rem;
margin: 3rem auto;
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
section {
height: 100%;
flex: 0 0 100%;
scroll-snap-align: center;
}
section {
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
background-color: darkorchid;
text-align: center;
}
section:nth-child(2n) {
background-color: turquoise;
}
section:nth-child(3n) {
background-color: tomato;
}
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Helvetica', sans-serif;
}
.scroll-container {
height: 70vw;
max-height: 30rem;
margin: 3rem auto;
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
section {
height: 100%;
flex: 0 0 100%;
scroll-snap-align: center;
}
section {
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
background-color: darkorchid;
text-align: center;
}
section:nth-child(2n) {
background-color: turquoise;
}
section:nth-child(3n) {
background-color: tomato;
}
交叉口觀測器API
通過實現上述功能，我們的網頁已經具有了更原生的感覺。為了進一步改善這一點，我們可以添加一些基于滾動的過渡和動畫。為此，我們需要使用API，使用一些JavaScript。這使我們可以創建一個觀察器，監視與視口相交的元素，并在發生這種情況時觸發回調函數。它比依賴連續偵聽滾動事件的庫更有效。
例如，只要我們的部分之一與容器相交25％（使用該threshold選項），就會觸發回調函數。如果相交發生時，回調在該部分中添加至少25％的類（在元素進入視圖時生效），否則將其刪除（當元素移出視圖時） 。然后，我們可以為每個部分添加一些CSS以過渡其內容： 當然，也可以在CSS或JS中實現更多精美的過渡和動畫效果！
const sections = [...document.querySelectorAll("section")];
let options = {
rootMargin: "0px",
threshold: 0.25
};
const callback = (entries, observer) => {
entries.forEach(entry => {
const { target } = entry;
console.log(entry, target)
if (entry.intersectionRatio >= 0.25) {
target.classList.add("is-visible");
} else {
target.classList.remove("is-visible");
}
});
};
const observer = new IntersectionObserver(callback, options);
sections.forEach((section, index) => {
observer.observe(section);
});
window.onload(removeClass());
let options = {
rootMargin: "0px",
threshold: 0.25
};
const callback = (entries, observer) => {
entries.forEach(entry => {
const { target } = entry;
console.log(entry, target)
if (entry.intersectionRatio >= 0.25) {
target.classList.add("is-visible");
} else {
target.classList.remove("is-visible");
}
});
};
const observer = new IntersectionObserver(callback, options);
sections.forEach((section, index) => {
observer.observe(section);
});
window.onload(removeClass());
位置：粘性
還有一個CSS屬性可以幫助您提高滾動體驗，那就是position屬性。與position：fixed不同，position：sticky它更像是臨時鎖定，鎖定元素相對于最近的相對祖先的位置并且不會改變。位置值為的元素sticky將固定不變，直到達其父元素的閾值為止，此時該元素將恢復相對定位。 通過“粘貼”滾動部分中的某些元素，即它們與部分之間滾動的定做有關，僅僅使用CSS就能指示元素響應其在容器中的位置。
瀏覽器支持和后備
該scroll-snap-type和scroll-snap-align性能都相當良好支撐。前者需要Edge和IE的前綴，而舊版本的Safari不支持軸值。在較新版本的Safari中，它運行良好。除IE之外，Intersection Observer同樣具有良好的支持水平。
通過將與滾動相關的代碼包裝在功能查詢中，我們可以提供常規的滾動體驗，以作為較舊的瀏覽器用戶的后備方式，在這些瀏覽器中，訪問內容至關重要。不支持scroll-snap-type軸值的瀏覽器將正常滾動。
在一些基于滾動的樣式上花費時間似乎有些愚蠢或輕浮。但我相信這是將Web定位為本地應用程序的可行替代方案，保持開放和可訪問性的重要組成部分。盡管這些新的CSS功能并未提供我們可能期望的全功能JS庫所提供的全部控制，但它們具有一個主要優點：簡單性和可靠性。通過在可能的情況下利用Web標準，我們可以兼得兩全：滿足客戶期望的光滑且引人注目的網站，并為用戶帶來更好的性能。
（非特殊說明，本文版權歸原作者所有，轉載請注明出處 ）
標簽： 上海網站建設、上海網站制作、高端網站設計、邁若網絡
手機隨時獲取邁若動態，掃描左側二維碼
添加邁若微信公眾號【manro_since2005】
