浏覽器滾動

分類

滾動分

全局滾動(浏覽器視窗)

跟

局部滾動(自定義的盒子)

，以下内容絕大部分都是指

全局滾動

，

局部滾動

的話擷取

指定的DOM

再調用

相應的API

即可

如何設定全局滾動條高度

1. 最常用的方法：

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

2. 也可以利用

相對滾動

設定：

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

3. 或者利用

scrollTop

document.scrollingElement.scrollTop = 100;

注意：         scrollTo                跟         scrollBy                的參數是一樣的，差別就是         scrollBy                滾動距離是相對與目前滾動條位置進行滾動
           

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

// 擷取元素的offsetTop(元素距離文檔頂部的距離)
let offsetTop = document.querySelector(".box").offsetTop;

// 設定滾動條的高度
window.scrollTo(0, offsetTop);
           

2. 或者用錨點：

<a href="#box">盒子出現在頂部</a>
<div id="box"></div>
           

3. 或者利用

scrollIntoView

進行展現：

document.querySelector(".box").scrollIntoView();           

   還可以指定元素的出現位置：

// start出現在視口頂部、center出現在視口中央、end出現在視口底部              document.querySelector(".box").scrollIntoView({
  block: "start" || "center" || "end"
});           

如何設定滾動具有平滑的過渡效果

1. 利用每個方法的

參數

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

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

document.querySelector(".box").scrollIntoView({
  behavior: "smooth"
});           

2. 或者用

css

屬性設定：

html {
  scroll-behavior: smooth; // 全局滾動具有平滑效果
}

// 或者所有
* {
 scroll-behavior: smooth;
}
注意：設定了該屬性之後，所有方法都可以不用設定         behavior                參數了，二選一即可，因為都是         控制目前指定元素的滾動行為                ，是以錨點跳轉、設定         scrollTop                也具有平滑(         smooth                )的         滾動行為                

一些有趣的東西

1. scrollingElement

該對象可以非常

相容

地擷取

scrollTop

、

scrollHeight

等屬性，在

移動端

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("已到達底部");
  }
});
           

函數節流（減少代碼執行頻率）、去抖（判斷某個

動作結束

，如剛剛的滾動結束、input輸入結束等）

6. 解決IOS裝置局部滾動不順暢(粘手)

除了浏覽器原生滾動，

自定義的滾動條

都會出現這種情況，加以下屬性就可以解決：

.box {
  -webkit-overflow-scrolling: touch;
}           

注意：要真機才能看到效果，這裡指的         局部滾動                是指         自己定義的盒子                ，然後設定         overflow: auto || scroll;                後的滾動行為；           

7. 滾動傳播

指有多個

滾動區域

，當一個

滾動區域

滾動完之後，繼續滾動會

傳播到

到父區域繼續滾動的行為：

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

8. 橫向滾動

移動端

遇到此需求比較多，常用于圖檔展示：

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

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

  li {
    display: inline-block;

    img {
      display: block;
      width: 200px;
    }
  }
}           

9. 滾動結束後，強制滾動到指定元素

基于上面的例子，我們設定如下屬性：

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