浏览器的一些“滚动”行为鉴赏

分类

按照我的个人理解，滚动分全局滚动(浏览器窗口)跟局部滚动(自定义的盒子)，以下内容绝大部分都是指全局滚动，局部滚动的话获取指定的DOM再调用相应的API即可✅

如何设置全局滚动条高度

最常用的方法：
window.scrollTo(0, 0);
// or
window.scrollTo({
 left: 0,
 top: 100
});
复制代码

也可以利用相对滚动设置：

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

或者利用scrollTop设置：
document.scrollingElement.scrollTop = 100;
复制代码
注意：scrollTo跟scrollBy的参数是一样的，区别就是scrollBy滚动距离是相对与当前滚动条位置进行滚动✅

效果对比如下：

很明显，前者就是把滚动高度设置成100，而后者是每次都增加100，这就是为什么称之为相对滚动了✅

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

最常用的方法：
// 获取元素的offsetTop(元素距离文档顶部的距离)
let offsetTop = document.querySelector(".box").offsetTop;
// 设置滚动条的高度
window.scrollTo(0, offsetTop);
复制代码`

效果如下：

或者用锚点：
<a href="#box">盒子出现在顶部</a>
<div id="box"></div>
复制代码

效果如下：

或者利用scrollIntoView进行展现：
document.querySelector(".box").scrollIntoView();
复制代码

效果如下：