对象不支持 React 中 IE11 中的属性或方法“scrollBy”答案

【问题标题】：Object doesn't support property or method 'scrollBy' in IE11 in React对象不支持 React 中 IE11 中的属性或方法“scrollBy”
【发布时间】：2019-03-18 12:03:20
【问题描述】：

我正在使用以下代码在 mouseDown 上滚动滚动元素，并在 mouseUp/mouseOut 上停止滚动。

scrubby(xDir) {
    let dub = setInterval(() => {
      document.getElementById("chart").scrollBy(8 * xDir, 0);
    }, 10);

    this.setState({ dub: dub });
  }

  scrubbyStop() {
    const { dub } = this.state;
    if (dub !== null) {
      clearInterval(dub);
    }
    this.setState({ dub: null });
  }

这适用于除 IE 11 之外的任何地方。在 IE 11 中，我收到以下错误：

TypeError: Object doesn't support property or method 'scrollBy'

当我 console.log 元素时，document.getElementById 以确保我选择了元素。

我正在使用 babel-polyfil

我看到很多与scrollTo相关的问题，但不是scrollBy。有谁知道任何可能适用于 IE 的解决方法、polyfill 或替代方法。

【问题讨论】：

标签： javascript reactjs internet-explorer-11 babel-polyfill

【解决方案1】：

Babel polyfill“将模拟完整的 ES2015+ 环境”。但是，scrollBy 不是 ECMAScript 规范的一部分，因此不会被 Babel 填充。您需要自己添加适当的 polyfill，例如smooth scroll behaviour polyfill，其中还包括scrollBy。

【讨论】：

【解决方案2】：

这个问题我迟到了一年多，但是如果其他人面临这个问题并且想要一个仅填写scrollBy的解决方案，我正在使用jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

...并将其添加到我页面的 JavaScript：

if(!window.scrollBy){
  window.scrollBy = function(x, y){
    if(x) $('html, body').scrollLeft($(window).scrollLeft() + x);
    if(y) $('html, body').scrollTop($(window).scrollTop() + y);
  };
}

if(!Element.prototype.scrollBy){
  Element.prototype.scrollBy = function(x, y){
    if(x) $(this).scrollLeft($(this).scrollLeft() + x);
    if(y) $(this).scrollTop($(this).scrollTop() + y);
  };
}

它已经过测试并在 IE 11 中运行。

【讨论】：