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

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

适用 ScrollToOptions 的方法

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

接下来再看看 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' });

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

同胞兄弟 Element.scrollIntoView()

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 滚动就讲到这里，如果文中有错误或者可以改进的地方请立即在评论区公开处刑，觉得写的不错的话，来个小小的点赞，你的鼓励是我坚持的动力，谢谢?~