score:4

Accepted answer

you can still use react.createref(). only string refs and callbacks are deprecated/in the process of being deprecated.

import react, {component, createref} from 'react'
class app extends component {    
  myref = createref()   // create a ref object     
  scrolltoref = () => 
    window.scrollto(0, this.myref.current.offsettop); 

  render() {
    return <div ref={this.myref}></div> 
  }
}

score:0

try to component for animating vertical scrolling https://www.npmjs.com/package/react-scroll

score:1

react.createref was introduced in 16.3, so you could use that. put it on an element and use the scrollintoview method on the current property, which is the dom node.

example

class app extends react.component {
  bottomref = react.createref();

  onclick = () => {
    this.bottomref.current.scrollintoview();
  };

  render() {
    return (
      <div>
        <button onclick={this.onclick}>scroll to bottom</button>
        <div style={{ height: 2000 }} />
        <div ref={this.bottomref}>bottom</div>
      </div>
    );
  }
}

reactdom.render(<app />, document.getelementbyid("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>


Related Query

More Query from same tag