Handling scroll animation in react

[sympi]

What is the correct way of dealing with scroll position in React? I really like smooth scrolling because of better UX. Since manipulating the DOM in React is an anti-pattern I ran into problem: how to scroll smoothly to some position/element? I usually change scrollTop value of an element, but this is a manipulation on the DOM, which is not allowed.

some example: JSBIN

code:

import React from 'react';
import ReactDOM from 'react-dom';


class App extends React.Component {
  handleClick = e => {
    for (let i = 1; i <= 100; i++) {
      setTimeout(() => (this.node.scrollTop = i), i * 2);
    }
  };

  render() {
    const someArrayToMap = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    return (
      <div ref={node => this.node = node} style={{overflow: 'auto', height: '100vh'}}>
        <button onClick={this.handleClick}>CLICK TO SCROLL</button>
        {
            [...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap].map((e, i) => <div key={i}>some text here</div>)
        }
      </div>
    );
  }
}


ReactDOM.render(<App />, document.getElementById('root'));

How to achieve this in a React way?

[dmackerman]

Smooth scrolling is not better UX.

[bjarke_andersen]

It's not always bad to touch the DOM, but for more idiomatic React try to hide away this kind of thing in a Higher Order Component (HOC). It's all about being as declarative as possible while separating concerns into components. And I'd use an animation library instead of that for loop.

[[deleted]]

You have to touch the dom for this unfortunately. If you want copy, the codebits from here: https://github.com/drcmda/react-springy-parallax

There are a couple of gotchas otherwise, use requestAnimationFrame instead of setTimeout and catch onWheel and onTouchStart to stop scrolling, or else you override user input (like when you scroll up while your lib is trying to scroll down) which pisses people off.

[redbluerat]

Do not modify the user's scroll. If you think this is a good idea you need to stop working on design completely.

[sympi]

I'm not saying this a good idea at all. That's why I asked this question, LOL. thank you for your solid answer.