js 中关于操纵 Element 进行滚动的方法，都在这了‍‍‍

为了方便咱操作 html 中的元素滚动条进行上下左右的滚动，js 自带了N种（规范内）方法：

适用 ScrollToOptions 的方法

CSSOM View 规范的 ScrollToOptions 用于指定一个元素应该滚动到哪里，以及滚动是否应该平滑，它可以作为参数提供给以下方法：

Window.scroll()

Window.scrollTo()

Window.scrollBy()

Element.scroll()

Element.scrollTo()

Element.scrollBy()

这么多方法我该怎么选，怎么用？

使用方法：
element.scrollTo(x-coord, y-coord)
// or
element.scrollTo(options)
参数

x-coord(必填): 是期望滚动到位置水平轴上距元素左上角的像素，例如：element.scrollTo(100, 0)。

y-coord(必填): 是期望滚动到位置竖直轴上距元素左上角的像素，例如：element.scrollTo(0, 100)。

或者

options: 遵循 CSSOM View 规范的 ScrollToOptions 对象。

两种方案适用于以上全部方法，需要注意：scrollBy 方法回滚时需要填写负数数值~

诶，划重点，遵循 CSSOM View 规范的 ScrollToOptions，以上罗列的方法都遵循 CSSOM View 的规范，所以它们的使用方法可以说是完全一致，只是名儿不一样，ohhhhhhh CSSOM View yyds！ MDN文档：developer.mozilla.org/zh-CN/docs/…

接下来再看看 ScrollToOptions 怎么耍：

ScrollToOptions 共接受三个参数：

top (Number): 指定 window 或元素 Y 轴方向滚动的像素数。`

left (Number): 指定 window 或元素 X 轴方向滚动的像素数。

behavior (smooth | instant | auto) : 默认值 auto(效果等同 instant)，指定滚动是否应该(smooth)平滑进行，还是立即跳到(instant)指定位置。该属性实际上定义在 ScrollOptions 上，它通过 ScrollToOptions 实现。

通过配置 ScrollToOptions 进行滚动：

const options = {
	left: 100,
	top: 100,
	behavior: 'smooth'
};
window.scrollTo.scroll(options);


// window.scrollTo
const checked = true;
const scrollOptions = {
	left: 100,
	top: 100,
	behavior: checked ? 'smooth' : 'auto'
};

window.scrollTo(scrollOptions);

以上各种方法控制（上下左右）滚动代码：

const scroller = document.getElementById('scroller');

// scroll 与 scrollTo (两种方法使用方式完全一致，所以只写出 scrollTo)
/* 向上滚动 */
scroller.scrollTo(0, 0);
// or 
scroller.scrollTo({ top: 0, behavior: 'smooth' });


/* 向下滚动 */
scroller.scrollTo(0, scroller.scrollHeight);
// or
scroller.scrollTo({ top: scroller.scrollHeight, behavior: 'smooth'})


/* 向左滚动 */
scroller.scrollTo(0, 0);
// or
scroller.scrollTo({ left: 0, behavior: 'smooth'})


/* 向右滚动 */
scroller.scrollTo(scroller.scrollWidth);
// or
scroller.scrollTo({ left: scroller.scrollWidth, behavior: 'smooth'})

// ----------------- scrollBy (回滚滚动条需要写负数，其它一致) -----------------
/* 向上滚动 */
scroller.scrollBy(0, -scroller.scrollHeight);
// or 
scroller.scrollTo({ top: -scroller.scrollHeight, behavior: 'smooth' });

/* 向左滚动 */
scroller.scrollBy(-scroller.scrollWidth, 0);
// or 
scroller.scrollTo({ left: -scroller.scrollWidth, behavior: 'smooth' });

scrollWidth: 是元素全部内容的宽度，包括由于overflow溢出而在屏幕上不可见的内容

scrollHeight: 是元素全部内容的高度，包括由于overflow溢出而在屏幕上不可见的内容

scrollTop: 横向滚动条距离元素最顶部的距离

scrollLeft: 横向滚动条距离元素最左侧的距离

以上直接使用 x,y 坐标轴方式滚动，写法简便，但是如果想要单独设置x, y轴时比较麻烦，因为两个参数都是必填的，相反 ScrollToOptions 配置方式则相对灵活，并且可以配置平滑滚动，坐标轴方式则不支持。所以，该用哪个你懂我意思吗？

同胞兄弟 Element.scrollIntoView()

Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数
使用方法： alignToTop（Boolean 可选）

true：元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: { block: "start", inline: "nearest" }。这是这个参数的默认值。

false：元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: { block: "end", inline: "nearest" }。

or scrollIntoViewOptions （CSSOM View 规范的一个包含下列属性的对象：可选，）

behavior (可选)：定义动画过渡效果，（smooth | instant | auto）之一。默认为 "auto"。

block (可选)：定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一，默认为 "start"，start，center，end 分别对应上中下，nearest 表示滚动到距离最近的点。

inline (可选)：定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一，默认为 "nearest"，start，center，end 分别对应左中右，nearest 表示滚动到距离最近的点。

var element = document.getElementById("box");

/* 滚动到顶部 */
element.scrollIntoView();
// or
element.scrollIntoView({ behavior: "smooth", block: "start" });

/* 滚动到底部 */
element.scrollIntoView(false);
// or
element.scrollIntoView({ behavior: "smooth", block: "end" });

/* 滚动到最左侧 */
element.scrollIntoView({ behavior: "smooth", inline: "start" });

/* 滚动到最右侧 */
element.scrollIntoView({ behavior: "smooth", inline: "end" });

/* 滚动到中间位置 */
element.scrollIntoView({ behavior: "smooth", block: 'center', inline: "center" });

简单案例，欢迎来踩：

codepen.io/_DreamMaker… 在这里插入图片描述关于 Element 滚动就讲到这里，如果文中有错误或者可以改进的地方请立即在评论区公开处刑，觉得写的不错的话，来个小小的点赞，你的鼓励是我坚持的动力，谢谢😀~