一区二区三区精品视频免费播放,亚洲а∨无码2019在线观看,亚洲 另类 小说 卡通动漫,337P中国人体啪啪

最新案例推薦
點擊查看
掃一掃查看
最新行業(yè)案例

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

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

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

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

　　滾動捕捉

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

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

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

　　scroll-snap-align應(yī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;
   }

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

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

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

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

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());

　　位置：粘性

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

　　瀏覽器支持和后備

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

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

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




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


邁若微信公眾號_上海網(wǎng)站建設(shè)公司

手機隨時獲取邁若動態(tài)，掃描左側(cè)二維碼
添加邁若微信公眾號【manro_since2005】