64

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

 5 years ago
source link: https://www.tuicool.com/articles/ENJ3M3a
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

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

aY3UFjQ.jpg!web

一、韩信么？

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。

滚动是韩信吗？走多多益善的套路？ 7z6femy.png!web

二、文体两开花

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代码如下：

<button onclick="window.scrollBy(0, 20)">点击我滚动+20</button>

三、优缺点

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. 兼容性

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，增加点前端技术的广度，挺好！

yayQRrR.png!web

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 。

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

EvINneJ.png!web

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

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

（本篇完）


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK