element.scrollTo 方法使用与兼容

window.scrollToelement.scrollTo兼容性问题Reference

在工作中碰到控制滚动条滚动的需求，原有代码使用 scrollTo 进行滚动，在现代浏览器上都可以正常运行，但是到了 IE11 上却不行了，于是对 scrollTo 做了一层小小的封装。于是在这里分享一下…

window.scrollTo

关于在 document 上滚动的问题，直接可以使用window.scrollTo方法，用法如下：

在 mdn 上说明了，如果想对 elements 进行滚动条操作，可以使用element.scrollTop和scrollLeft。 在这里要补充说明一下element.scrollTo方法

element.scrollTo

element.scrollTo方法也是无意间发现，mdn 和 caniuse 上是没有对该方法进行说明的。 该方法入参与 window 上的 scrollTo 一致，用法如下：

兼容性问题

window.scrollTo的兼容性如下

window.scrollTo看上去十分理想，但是element.scrollTo就没那么理想化了。

这位小哥测试了 Chrome, Chrome66 支持 element.scrollTo, Chrome48 不支持

经过几个主流浏览器的测试之后，发现 IE 11 下的element.scrollTo为undefined。

这里我简单封装了一下 scrollTo，做了一个小小的 polyfill。代码如下：

这里也简单说明下 scrollLeft 和 scrollTop 做滚动条操作的用法 如果滚动条在容器最底部，假设$el 为容器

scrollTop 可以理解为滚动条距离容器顶部的距离，当然其实这里有很大的坑。 具体可以看 mdn 的 scrollTop 描述。

那 scrollLeft 就是滚动条距离容器左侧的距离了。

那其实 scrollLeft = 0 就等价于滚动条在最左边，scrollTop = 0 就等价于滚动条在最顶层。 scrollLeft 就是原有 api 参数中的 x，scrollTop 就是原有 api 参数中的 y。

Reference

https://www.w3.org/TR/cssom-view-1/#extension-to-the-element-interface

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft

var x = 0, y = 100;
window.scrollTo(x, y);

var $el = document.querySelector("#container");
var x = 0,
  y = 100;
$el.scrollTo(x, y);

/**
 * polyfill for scrollTo on element
 * @param {HtmlElement} el
 * @param {number} x
 * @param {number} y
 */
function scrollTo(el, x, y) {
  if (!el) {
    return;
  }

  if (el.scrollTo) {
    el.scrollTo(x, y);
  } else {
    el.scrollLeft = x;
    el.scrollTop = y;
  }
}

$el.clientHeight + $el.scrollTop === $el.scrollHeight; // true