起因
项目中有如下的代码:
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;
};