Element.scrollTo兼容性问题解决
起因
项目中有如下的代码:
document.getElementById('container').scrollTo(0,0);复制代码在翻页时需要将页面滚动到顶部，但是项目中的滚动条时在container元素上，不是element元素上。这就导致了后续bug的发生。
首先我们查看一下Element.scrollTo的兼容性developer.mozilla.org/zh-CN/docs/…
可以看到在ie浏览器中是完全不支持scrollTo这个属性。导致我们的项目在ie中运行时，滚动条无法滚动回顶部。
解决方案
window.scrollTo
查看window.scrollTo的兼容性
发现在ie中兼容，我们只需要把项目的滚动条切换到window上，就可以解决这个问题。but，作为一个迭代多年的项目修改这个，无异于go die。于是我们把目光放到了下边这个方法中，polyfill
polyfill
针对element.scrollTo方法添加polyfill。
首先判断是非支持scrollTo，通过document.documentElement.style上是否有
scroll-behavior这个属性。
scroll-behavior：当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，CSS 属性scroll-behavior为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。
所以在polyfill的开头首先判断是否支持scrollTo，如果支持直接return。
if ('scrollBehavior' in d.documentElement.style) {
return;
}复制代码2.对element添加scrollTo的方法。在原型对象上添加方法scrollTo
const Element = window.HTMLElement || window.Element;
Element.prototype.scrollTo = function () {
let left = 0;
let top = 0;
if (arguments.length > 1) {
left = arguments[0];
top = arguments[1];
} else {
left = arguments[0].left;
top = arguments[0].top;
}
this.scrollLeft = left;
this.scrollTop = top;
};复制代码也可以直接引入smoothscroll polyfill的包
作者：eesram
链接：https://juejin.cn/post/7041845658730364941