还算有点用的scrollTo和scrollBy两个JS API

Posted 2021-02-20 林见夕

一、你是谁？

scrollTo和scrollBy这两个JS API也是用来控制元素或者窗体的滚动距离的。

我脑中的存储快速索引了一遍，发现JS API中控制元素或者窗体的滚动距离的API还真不少。

例如兼容性很好的scrollLeft和scrollTop，使用示意：

// 设置element左滚动距离100
element.scrollLeft = 100;
// 设置element上滚动距离200
element.scrollTop = 200;

或者IE9+浏览器支持，控制窗体滚动距离的pageXOffset和pageYOffset（注意，X, Y在Offset的前面）：

// 设置窗体左滚动距离100
window.pageXOffset = 100;
// 设置窗体上滚动距离200
window.pageYOffset = 200;

结果现在又多了个IE/Edge浏览器不支持的scrollTo和scrollBy两个JS API。

滚动是韩信吗？走多多益善的套路？

二、芜湖大司马

scrollTo和scrollBy两个JS API是近亲，语法一模一样，作用也非常类似。

这两个API都是文体两开花，既能作用于windows对象，表示窗体滚动；又可以作用于普通Element元素，表示元素滚动。

示意：

window.scrollTo();
Element.scrollTo();

window.scrollBy();
Element.scrollBy();

但是这两个API控制滚动的细节有所出入。

scrollTo()表示滚到到指定的位置，而scrollBy()表示相对当前的位置滚动多少距离。

例如：

window.scrollTo(100, 200);

上面的写法等同于：

// 设置窗体左滚动距离100
window.pageXOffset = 100;
// 设置窗体上滚动距离200
window.pageYOffset = 200;

而:

window.scrollBy(10, 20);   // 偏移10, 20滚动距离

上面的写法等同于：

// 设置窗体左滚动距离增加10
window.pageXOffset += 10;
// 设置窗体上滚动距离增加20
window.pageYOffset += 20;

具体语法:

element.scrollTo(x-coord, y-coord)
element.scrollTo(options)

element.scrollBy(x-coord, y-coord)
element.scrollBy(options)

其中

x-coord

• X坐标。表示距离左侧滚动的距离坐标大小。
  y-coord
• y坐标。表示距离左侧滚动的距离坐标大小