Home未分类还算有点用的scrollTo和scrollBy两个JS API

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

2012 年 3 月 21 日

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8799

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、韩信么？

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坐标。表示距离左侧滚动的距离坐标大小。
options
options 是一个ScrollToOptions参数类型，包含
left ,
top 和
behavior

这3个参数值。例如：

window.scrollBy({
  top: 10,
  left: 20,
  behavior: 'smooth'
});

具体：

  • left 指定沿着X轴距离window或者element滚动距离，值的单位是像素。
  • top 指定沿着Y轴距离window或者element的滚动距离，值的单位是像素。
  • behavior 指定滚动触发的时候，是平滑的动画还是直接过去。关于平滑滚动，可以参考去年写的 这篇关于CSS scroll-behavior的文章 。

也就是 window.scrollBy(10, 20) 我们也可以写作： 

window.scrollBy({
  left: 10,
  top: 20
})

眼见为实，例如，点击下面按钮，让页面垂直滚动距离增加20px：

HTML代码如下：

三、优缺点

scrollTo和scrollBy两个JS API的优点有两个：

  1. 调用统一
    scrollLeft/scrollTop这两个属性只能作为元素上，在window对象上没有效果。而pageXOffset/pageYOffset只能作用于window对象上，在元素上没有效果。而scrollTo和scrollBy不仅可以作用于window对象上，还可以作用于元素上。实现的调用的统一。
  2. 平滑支持
    scrollLeft/scrollTop和pageXOffset/pageYOffset控制滚动定位，想要定位平滑，只能借助于CSS scroll-behavior属性，JS这块设置无力。但是scrollTo和scrollBy在比较方便，直接有API参数支持。

scrollTo和scrollBy两个JS API的缺点就一个：

  1. 兼容性

    2. scrollTo和scrollBy两个JS API在IE浏览器中是无效的，如果是需要兼容IE浏览器的项目，需要先写个简单的polyfill（见文末）。

四、狐朋狗友们

滚动相关的这波API不仅仅有scrollTo和scrollBy，还有scroll，使用示意：

Window.scroll()
Element.scroll()

scroll() 方法和 scrollTo() 语法和作用是一样的。

另外还有两个非标准的相对滚动方法（目前仅Firefox浏览器支持），如下：

  • Window.scrollByLines()

    表示相对当前的滚动位置再滚动指定行数距离，行为表现接近于上下键控制滚动。语法如下：

    window.scrollByLines(lines)

    例如 window.scrollByLines(-5) 表示向上滚动5行的距离。

  • Window.scrollByPages()

    表示相对当前的滚动位置再滚动指定页数距离，行为表现接近于空格键（反向+Shift）控制滚动。语法如下：

    window.scrollByPages(pages)

    例如 window.scrollByPages(-1); 表示向上滚动1页的距离。

五、还算有点用

一番整理下来，scrollTo和scrollBy这两个API还算有点用。以后元素的滚动距离控制我打算都使用这两个API了，至于原因，不用用怎么知道这两个API隐藏的坑或者埋的彩蛋呢。

反正得失差不多，用用新的API，增加点前端技术的广度，挺好！

IE的polyfill其实很简单，顺手写两个：

/**
 * @description scrollTo/scrollBy的polyfill，IE9+
 * @author zhangxinxu(.com)
 * @created 2019-07-27
 */

if (!window.scrollTo) {
    window.scrollTo = function (x, y) {
        window.pageXOffset = x;
        window.pageYOffset = y;
    };
}
if (!window.scrollBy) {
    window.scrollBy = function (x, y) {
        window.pageXOffset += x;
        window.pageYOffset += y;
    };
}
if (!document.body.scrollTo) {
    Element.prototype.scrollTo = function (x, y) {
        this.scrollLeft = x;
        this.scrollTop = y;
    };
}
if (!document.body.scrollBy) {
    Element.prototype.scrollBy = function (x, y) {
        this.scrollLeft += x;
        this.scrollTop += y;
    };
}

或者 点击这里下载scroll-polyfill.js 。

顺手一写，未经测试，欢迎反馈。

本文为原创文章，欢迎分享，勿全文转载，如果内容你实在喜欢，可以加入收藏夹，永不过期，而且还会及时更新知识点以及修正错误，阅读体验也更好。

本文地址： https://www.zhangxinxu.com/wordpress/?p=8799

（本篇完）

Related Posts

About The Author

php