国产美女精品一区二区三区,荡女精品导航,亚洲线精品一区二区三八戒

最新案例推薦

點(diǎn)擊查看

掃一掃查看
最新行業(yè)案例

如何讓你的網(wǎng)站擁有精美的滾動(dòng)體驗(yàn)

發(fā)表于：2019-12-20

　　在傳統(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)，觸摸手勢(shì)或箭頭鍵。與線性滾動(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。

* {
    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;
   }

　　如果將滾動(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è)部分：

* {
    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;
   }

　　交叉口觀測(cè)器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)：簡(jiǎ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】

相關(guān)文章