scroll系列 相关属性

不管是滚动条还是超出内容被隐藏，这2种情况都可操作下面4个属性，超出内容被隐藏时，虽然没有滚动条，但是可以用scrollTo()这个函数来滚动元素内容，也会产生 scrollTop 和 scrollLeft 。 参考：developer.mozilla.org/zh-CN/docs/…

属性

• 元素.scrollTop

【元素自身滚动条】距离【元素自身上边缘】的距离（元素内容被卷出的部分）

• 元素.scrollLeft

【元素自身滚动条】距离【元素自身左边缘】的距离（元素内容被卷出的部分）

• 元素.scrollHeight = (子内容高度) + (元素padding)

= 元素css样式高度 + 元素padding + 元素.scrollTop的最大值

• 元素.scrollWidth = (子内容宽度) + (元素padding)

= 元素css样式宽度 + 元素padding + 元素.scrollLeft的最大值

CSS的scroll-behavior

scroll-behavior: auto | smooth | inherit | unset

<div class="box" id="box">Box</div>
<a href="#box" class="btn">回到顶部</a>

html, body {
  scroll-behavior: smooth;
}

//通过js判断是否支持css scroll-behavior属性
function isSuportScrollBehavior() {
    return !(typeof window.getComputedStyle(document.body).scrollBehavior === 'undefined');
}

Element.scrollTop

设置属性scrollTop为元素的scrollHeight 即可滚动到元素底部，不过没有动画效果

let btn = document.querySelector("#btn");

btn.addEventListener("click", function () {
  document.documentElement.scrollTop = document.documentElement.scrollHeight;
});

Element.scroll()/Window.scroll()

scroll() 方法是用于滚动元素 到某个特定坐标,scroll(x-coord, y-coord),scroll(options);

• x-coord 你想要显示在左上角的元素沿水平轴的像素。
• y-coord 你想要显示在左上角的元素沿垂直轴的像素。
• options
  • top: 指定沿 Y 轴滚动窗口或元素的像素数。
  • left: 指定沿 X 轴滚动窗口或元素的像素数。
  • behavior:
    • smooth 表示平滑滚动并产生过渡效果,
    • auto 或缺省值会直接跳转到目标位置，没有过渡效果。

Element.scrollTo()/Window.scrollTo()

方法是用于滚动元素 到某个特定坐标,使用方法同Element.scroll()/Window.scroll();

dom.scrollTo(0,0);
window.scrollTo({
  top: 500,
  behavior: 'smooth'
});

Element.scrollBy()/Window.scrollBy()

scrollBy() 方法是使得元素滚动一段特定距离的 Element 接口。使用方法同Element.scroll()/Window.scroll()

dom.scrollBy({ left: 100, behavior: 'smooth' });

Element.scrollIntoView()

Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。 scrollIntoView(),scrollIntoView(alignToTop),scrollIntoView(scrollIntoViewOptions)

• alignToTop可选（布尔值）
  • true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: “start”, inline: “nearest”}。这是这个参数的默认值。
  • false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的 scrollIntoViewOptions: {block: “end”, inline: “nearest”}。
• scrollIntoViewOptions 可选 实验性
  • behavior 可选 定义动画过渡效果，auto 或 smooth 之一。默认为 auto。
  • block 可选 定义垂直方向的对齐，start(上)、center(中)、end(下) 或 nearest(距离最近的点) 之一。默认为 start。
  • inline 可选 定义水平方向的对齐，start、center、end 或 nearest 之一。默认为 nearest。

事件

scroll 事件会在 文档 或 一个元素 滚动时触发

// DOM0级事件处理程序
object.onscroll = function() {
    myScript
};
// DOM2级事件处理程序
object.addEventListener("scroll", myScript);

整个文档的滚动条

页面有DTD（指定了 DOCTYPE），使用document.documentElement获取； 页面无DTD（没有指定 DOCTYPE），使用 document.body 获取。

//兼容代码
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

//兼容方法
function getScroll() {
    return {
        left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0,
        top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0
    };
}