javascript - Object doesn't support property or method 'scrollBy' in IE11 in React - Stack Overflow

admin管理员组

文章数量:1023058

I am using the following code to scroll scroll an element on mouseDown, and stop scrolling on 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 });
  }

This works everywhere except IE 11. In IE 11 I get the following error:

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

When I console.log the element, the document.getElementById to ensure I am selecting the element.

I am using babel-polyfil

I see a lot of questions related to scrollTo, but not scrollBy. Does anyone know any workarounds, polyfill or alternatives that might work for IE.

I am using the following code to scroll scroll an element on mouseDown, and stop scrolling on 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 });
  }

This works everywhere except IE 11. In IE 11 I get the following error:

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

When I console.log the element, the document.getElementById to ensure I am selecting the element.

I am using babel-polyfil

I see a lot of questions related to scrollTo, but not scrollBy. Does anyone know any workarounds, polyfill or alternatives that might work for IE.

• javascript
• reactjs
• internet-explorer-11
• babel-polyfill

Share Improve this question Follow asked Oct 13, 2018 at 13:22 FinglishFinglish 9,9961515 gold badges7777 silver badges118118 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Babel polyfill "will emulate a full ES2015+ environment". However, scrollBy is not part of the ECMAScript specification and thus will not be polyfilled by Babel. You need to add a proper polyfill by yourself, for example smooth scroll behaviour polyfill which also includes scrollBy.

I'm over a year late to this question, but if anyone else is facing this issue and wants a solution that only fills in scrollBy, I'm using jQuery:

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

...and adding this to my page's 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);
  };
}

It's tested and working in IE 11.

I am using the following code to scroll scroll an element on mouseDown, and stop scrolling on 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 });
  }

This works everywhere except IE 11. In IE 11 I get the following error:

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

When I console.log the element, the document.getElementById to ensure I am selecting the element.

I am using babel-polyfil

I see a lot of questions related to scrollTo, but not scrollBy. Does anyone know any workarounds, polyfill or alternatives that might work for IE.

I am using the following code to scroll scroll an element on mouseDown, and stop scrolling on 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 });
  }

This works everywhere except IE 11. In IE 11 I get the following error:

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

When I console.log the element, the document.getElementById to ensure I am selecting the element.

I am using babel-polyfil

I see a lot of questions related to scrollTo, but not scrollBy. Does anyone know any workarounds, polyfill or alternatives that might work for IE.

• javascript
• reactjs
• internet-explorer-11
• babel-polyfill

Share Improve this question Follow asked Oct 13, 2018 at 13:22 FinglishFinglish 9,9961515 gold badges7777 silver badges118118 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Babel polyfill "will emulate a full ES2015+ environment". However, scrollBy is not part of the ECMAScript specification and thus will not be polyfilled by Babel. You need to add a proper polyfill by yourself, for example smooth scroll behaviour polyfill which also includes scrollBy.

I'm over a year late to this question, but if anyone else is facing this issue and wants a solution that only fills in scrollBy, I'm using jQuery:

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

...and adding this to my page's 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);
  };
}

It's tested and working in IE 11.

本文标签： javascriptObject doesn39t support property or method 39scrollBy39 in IE11 in ReactStack Overflow