IE 下 scrollTo 兼容

scrollTo

scroll 用来将元素滚动到指定位置，语法如下

window.scrollTo({
    left: 0,
    top: 0
});
Element.scrollTo({
    left: 0,
    top: 0
});

IE 下不兼容

但是在 IE 浏览器环境下不支持该 API，我们可以看到在 IE 下将会报错。

通过全局 polyfill 进行定义

我们在页面的头部通过 polyfill 进行自定义，如下：

if (!window.scrollTo) {
	window.scrollTo = function(option) {
		window.scrollLeft = option.left;
		window.scrollTop = option.top;
	};
}

if (!document.body.scrollTo) {
	Element.prototype.scrollTo = function(option) {
		this.scrollLeft = option.left;
		this.scrollTop = option.top;
	};
}

判断 window 及元素节点对象下是否存在 scrollTo 属性，不存在则自定义，这样就可以解决 IE 下不兼容 scrollTo 的问题。

还存在一个问题

如果了解过 scrollTo 这个 API 的人一定知道，scrollTo 还支持定义滑动动画的方式，这个在上面的定义的 polyfill 是没有实现的。

element.scrollTo({
  top: 100,
  left: 100,
  behavior: 'smooth' // 设置动画执行的方式
});