瀏覽器的一些「滾動」行爲鑑賞

最近挺忙的,此次抽空寫寫文陶冶下情操瀏覽器滾動真的每天見日日見啦,好比你如今看的這篇文章,往下看就必須得滾動,這篇文章主要聊聊滾動相關的一些方法屬性,還有一些有趣的例子🎈 文章涉及到的方法或屬性在文末會放連接,方便你們自行查閱!css

分類

按照個人我的理解,滾動分全局滾動(瀏覽器窗口)局部滾動(自定義的盒子),如下內容絕大部分都是指全局滾動局部滾動的話獲取指定的DOM再調用相應的API便可✅html

如何設置全局滾動條高度

  1. 最經常使用的方法:
window.scrollTo(0, 0);

// or
window.scrollTo({
  left: 0,
  top: 100
});

複製代碼
  1. 也能夠利用相對滾動設置:
window.scrollBy(0, 0);

// or
window.scrollBy({
  left: 0,
  top: 100
});
複製代碼
  1. 或者利用scrollTop設置:
document.scrollingElement.scrollTop = 100;
複製代碼

注意:scrollToscrollBy的參數是同樣的,區別就是scrollBy滾動距離是相對與當前滾動條位置進行滾動✅前端

效果對好比下:web

很明顯,前者就是把滾動高度設置成100,而後者是每次都增長100,這就是爲何稱之爲相對滾動了✅瀏覽器

如何指定一個元素顯示在視窗

  1. 最經常使用的方法:
// 獲取元素的offsetTop(元素距離文檔頂部的距離)
let offsetTop = document.querySelector(".box").offsetTop;

// 設置滾動條的高度
window.scrollTo(0, offsetTop);
複製代碼

效果以下:bash

  1. 或者用錨點:
<a href="#box">盒子出如今頂部</a>
<div id="box"></div>
複製代碼

效果以下:微信

  1. 或者利用scrollIntoView進行展示:
document.querySelector(".box").scrollIntoView();
複製代碼

效果以下: app

還能夠指定元素的出現位置:函數

// start出如今視口頂部、center出如今視口中央、end出如今視口底部
document.querySelector(".box").scrollIntoView({
  block: "start" || "center" || "end"
});
複製代碼

效果以下: post

如何設置滾動具備平滑的過渡效果

  1. 利用每一個方法的參數設置:
window.scrollTo({
  behavior: "smooth"
});

window.scrollBy({
  behavior: "smooth"
});

document.querySelector(".box").scrollIntoView({
  behavior: "smooth"
});
複製代碼

效果以下:

  1. 或者用css屬性設置:
html {
  scroll-behavior: smooth; // 全局滾動具備平滑效果
}

// 或者全部
* {
 scroll-behavior: smooth;
}
複製代碼

效果以下:

注意:設置了該屬性以後,全部方法均可以不用設置behavior參數了,二選一便可,由於都是控制當前指定元素的滾動行爲,因此錨點跳轉、設置scrollTop也具備平滑(smooth)的滾動行爲

一些有趣的東西

1. scrollingElement

該對象能夠很是兼容地獲取scrollTopscrollHeight等屬性,在移動端PC端都屢試不爽🤞

還記得當初寫這個兼容性方法:

let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
複製代碼

如今你只須要:

let scrollHeight = document.scrollingElement.scrollHeight;
複製代碼

由於在MDN中是這樣介紹它的:

標準模式返回documentElement,怪異模式返回body

2. 滾動到底部

window.scrollTo({
  left: 0,
  top: document.scrollingElement.scrollHeight
});

// 若是你實在是懶的話...
window.scrollTo(0, 999999);
複製代碼

注意:平滑滾動到頂部或者底部本身加參數或者屬性便可✅

3. 判斷瀏覽器已滾動到底部

window.addEventListener("scroll", () => {
  let {
    scrollTop,
    scrollHeight,
    clientHeight
  } = document.scrollingElement;
  
  // 當前滾動高度 + 視口高度 >= 文檔總高度
  if (scrollTop + clientHeight >= scrollHeight) {
    console.log("已到達底部");
  }
});
複製代碼

效果以下:

函數節流

當你沒加函數節流:

window.addEventListener("scroll", () => console.log("我在滾我在滾!"));
複製代碼

效果以下:

當你加了函數節流以後:

window.addEventListener("scroll", throttle(() => console.log("我在滾我在滾!")));
複製代碼

效果以下:

throttle源碼:

function throttle(fn, interval = 500) {
  let run = true;

  return function () {
    if (!run) return;
    run = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      run = true;
    }, interval);
  };
}
複製代碼

用處:減小代碼執行頻率✅

函數防抖

當你加了函數防抖以後:

window.addEventListener("scroll", debounce(() => console.log("滾動結束!")));
複製代碼

效果以下:

debounce源碼:

function debounce(fn, interval = 500) {
  let timeout = null;

  return function () {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      fn.apply(this, arguments);
    }, interval);
  };
}
複製代碼

用處:判斷某個動做結束,如剛剛的滾動結束、input輸入結束等✅

解決IOS設備局部滾動不暢(粘手)

除了瀏覽器原生滾動,自定義的滾動條都會出現這種狀況,加如下屬性就能夠解決:

.box {
  -webkit-overflow-scrolling: touch;
}
複製代碼

對好比下:

注意:要真機才能看到效果,這裏指的局部滾動是指本身定義的盒子,而後設置overflow: auto || scroll;後的滾動行爲;

滾動傳播

指有多個滾動區域,當一個滾動區域滾動完以後,繼續滾動會傳播到到父區域繼續滾動的行爲:

.box {
  overscroll-behavior: contain; // 阻止滾動傳播
}
複製代碼

對比效果圖以下:

橫向滾動

移動端遇到此需求比較多,經常使用於圖片展現:

<ul>
  <li>
    <img src="">
  </li>
  // ...
</ul>

ul {
  white-space: nowrap; // 超出不換行
  overflow-x: auto;

  li {
    display: inline-block;

    img {
      display: block;
      width: 200px;
    }
  }
}
複製代碼

效果以下:

滾動結束後,強制滾動到指定元素

基於上面的例子,咱們設置以下屬性:

ul {
  scroll-snap-type: x mandatory;
  
  li {
    scroll-snap-align: start;
  }
}
複製代碼

效果以下:

仔細看會發現,咱們鬆手的時候,會將最近的元素滾動到最右邊(初始位置,對於Y軸來說就是頂部,X軸則是右邊)

也能夠設置出如今中間:

li {
  scroll-snap-align: center;
}
複製代碼

效果以下:

這樣,一個簡易的輪播圖效果就出來啦!

還能夠實現全屏滾動:

注意:該屬性會在你滾動完以後再作處理,也就是說你能夠一會兒從圖片1跳到圖片9

最後

以上涉及到的方法或屬性文檔以下:

  1. scrollTo
  2. scrollBy
  3. scrollIntoView
  4. scrollingElement
  5. scroll-behavior
  6. -webkit-overflow-scrolling
  7. overscroll-behavior
  8. scroll-snap-type
  9. scroll-snap-align

若是你以爲這篇文章不錯,請別忘記點個關注哦~😊

相關推薦

利用"交叉觀察者"這個小寶貝兒,輕鬆實現懶加載、吸頂、觸底 ❗

交流

微信公衆號「前端宇宙情報局」,將不定時更新最新、實用的前端技巧/技術性文章,對了偶爾還會有互聯網中的趣事趣聞🍻

關注公衆號,回覆"1"獲取羣聊二維碼,一塊兒學習、一塊兒交流、一塊兒摸魚🌊

相關文章
相關標籤/搜索