滚动

如何设置全局滚动条高度

scrollTo跟scrollBy的参数是一样的，区别就是scrollBy滚动距离是相对与当前滚动条位置进行滚动

// 1 scrollTo
window.scrollTo(0, 0);

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

// 2 scrollBy相对滚动设置
window.scrollBy(0, 0);

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

// 3 scrollTop
document.scrollingElement.scrollTop = 100;

如何指定一个元素显示在视窗

代码去自动滑动offsetTop的距离

// 获取元素的offsetTop(元素距离文档顶部的距离)
let offsetTop = document.querySelector(".box").offsetTop;

// 设置滚动条的高度
window.scrollTo(0, offsetTop);

嫌麻烦可以用锚点

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

或者利用scrollIntoView进行展现：

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

// start出现在视口顶部、center出现在视口中央、end出现在视口底部
document.querySelector(".box").scrollIntoView({
  block: "start" || "center" || "end",
  behavior: "smooth" // p平滑滑动
});

滚动到底部

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

// 如果你实在是懒的话...
window.scrollTo(0, 999999);

判断浏览器已滚动到底部

window.addEventListener("scroll", () => {
  let {
    scrollTop,
    scrollHeight,
    clientHeight
  } = document.scrollingElement;
  
  // 当前滚动高度 + 视口高度 >= 文档总高度
  if (scrollTop + clientHeight >= scrollHeight) {
    console.log("已到达底部");
  }
});

scrollingElement

该对象可以非常兼容地获取scrollTop、scrollHeight等属性，在移动端跟PC端都屡试不爽🤞

还记得当初写这个兼容性方法：

let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

现在你只需要：

let scrollHeight = document.scrollingElement.scrollHeight; // scrollingElement标准模式返回documentElement，怪异模式返回body；

scroll 事件对象

这个event对象有scrollingElement的特性