在傳統(tǒng)上，web落后于本地平臺(tái)在某種程度上體現(xiàn)在應(yīng)用程序體驗(yàn)的“流暢性”，其實(shí)這種感覺大多來自于用戶界面對(duì)用戶交互的響應(yīng)方式，包括在內(nèi)容中滾動(dòng)的行為。

　　感覺大多來自于用戶界面對(duì)用戶交互的響應(yīng)方式，包括在內(nèi)容中滾動(dòng)的行為。 面對(duì)web平臺(tái)的局限性，開發(fā)人員經(jīng)常接觸JavaScript庫和框架來更改滾動(dòng)網(wǎng)頁的體驗(yàn)，如果實(shí)現(xiàn)時(shí)未充分考慮用戶體驗(yàn)，則并非是一件好事。更多的庫可能導(dǎo)致頁面膨脹，并降低網(wǎng)站的性能。但是有了相對(duì)較新的CSS Scroll Snap規(guī)范，我們就可以使用web標(biāo)準(zhǔn)來控制網(wǎng)頁的滾動(dòng)行為，而無需使用繁瑣的庫。

　　滾動(dòng)捕捉

　　用戶可以通過多種方式來控制網(wǎng)頁的滾動(dòng)位置，例如使用鼠標(biāo)，觸摸手勢或箭頭鍵。與線性滾動(dòng)體驗(yàn)不同，滾動(dòng)捕捉規(guī)范使網(wǎng)頁可以在用戶滾動(dòng)時(shí)捕捉到特定點(diǎn)。為此，我們需要一個(gè)高度固定的元素作為滾動(dòng)容器，并且該元素的直接子元素將確定捕捉點(diǎn)。

　　滾動(dòng)捕捉需要存在兩個(gè)主要的CSS屬性：scroll-snap-type和scroll-snap-align。scroll-snap-type適用于滾動(dòng)容器元素，并接受兩個(gè)關(guān)鍵字值。它告訴瀏覽器：

　　?  捕捉方向
　　?  是否必須執(zhí)行捕捉

　　scroll-snap-align應(yīng)用于子元素下，我們還需要在滾動(dòng)容器上設(shè)置固定高度，并將相關(guān)overflow屬性設(shè)置為scroll。

　　如果將滾動(dòng)容器和每個(gè)部分的高度都設(shè)置為100vh，這會(huì)影響整個(gè)網(wǎng)頁的滾動(dòng)體驗(yàn)。但滾動(dòng)捕捉也可以在較小的組件上實(shí)現(xiàn)。在x軸上設(shè)置滾動(dòng)捕捉可能會(huì)產(chǎn)生諸如輪播的效果。 如下，您也可以水平滾動(dòng)瀏覽各個(gè)部分：

　　交叉口觀測器API

　　通過實(shí)現(xiàn)上述功能，我們的網(wǎng)頁已經(jīng)具有了更原生的感覺。為了進(jìn)一步改善這一點(diǎn)，我們可以添加一些基于滾動(dòng)的過渡和動(dòng)畫。為此，我們需要使用API，使用一些JavaScript。這使我們可以創(chuàng)建一個(gè)觀察器，監(jiān)視與視口相交的元素，并在發(fā)生這種情況時(shí)觸發(fā)回調(diào)函數(shù)。它比依賴連續(xù)偵聽滾動(dòng)事件的庫更有效。

　　例如，只要我們的部分之一與容器相交25％（使用該threshold選項(xiàng)），就會(huì)觸發(fā)回調(diào)函數(shù)。如果相交發(fā)生時(shí)，回調(diào)在該部分中添加至少25％的類（在元素進(jìn)入視圖時(shí)生效），否則將其刪除（當(dāng)元素移出視圖時(shí)） 。然后，我們可以為每個(gè)部分添加一些CSS以過渡其內(nèi)容： 當(dāng)然，也可以在CSS或JS中實(shí)現(xiàn)更多精美的過渡和動(dòng)畫效果！

　　位置：粘性

還有一個(gè)CSS屬性可以幫助您提高滾動(dòng)體驗(yàn)，那就是position屬性。與position：fixed不同，position：sticky它更像是臨時(shí)鎖定，鎖定元素相對(duì)于最近的相對(duì)祖先的位置并且不會(huì)改變。位置值為的元素sticky將固定不變，直到達(dá)其父元素的閾值為止，此時(shí)該元素將恢復(fù)相對(duì)定位。 通過“粘貼”滾動(dòng)部分中的某些元素，即它們與部分之間滾動(dòng)的定做有關(guān)，僅僅使用CSS就能指示元素響應(yīng)其在容器中的位置。

　　瀏覽器支持和后備

　　該scroll-snap-type和scroll-snap-align性能都相當(dāng)良好支撐。前者需要Edge和IE的前綴，而舊版本的Safari不支持軸值。在較新版本的Safari中，它運(yùn)行良好。除IE之外，Intersection Observer同樣具有良好的支持水平。

　　通過將與滾動(dòng)相關(guān)的代碼包裝在功能查詢中，我們可以提供常規(guī)的滾動(dòng)體驗(yàn)，以作為較舊的瀏覽器用戶的后備方式，在這些瀏覽器中，訪問內(nèi)容至關(guān)重要。不支持scroll-snap-type軸值的瀏覽器將正常滾動(dòng)。

　　在一些基于滾動(dòng)的樣式上花費(fèi)時(shí)間似乎有些愚蠢或輕浮。但我相信這是將Web定位為本地應(yīng)用程序的可行替代方案，保持開放和可訪問性的重要組成部分。盡管這些新的CSS功能并未提供我們可能期望的全功能JS庫所提供的全部控制，但它們具有一個(gè)主要優(yōu)點(diǎn)：簡單性和可靠性。通過在可能的情況下利用Web標(biāo)準(zhǔn)，我們可以兼得兩全：滿足客戶期望的光滑且引人注目的網(wǎng)站，并為用戶帶來更好的性能。

（非特殊說明，本文版權(quán)歸原作者所有，轉(zhuǎn)載請(qǐng)注明出處 ）
標(biāo)簽： 上海網(wǎng)站建設(shè)、上海網(wǎng)站制作、高端網(wǎng)站設(shè)計(jì)、邁若網(wǎng)絡(luò)

手機(jī)隨時(shí)獲取邁若動(dòng)態(tài)，掃描左側(cè)二維碼
添加邁若微信公眾號(hào)【manro_since2005】