Real-time scroll animation processing

Question

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

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 Response mode?

Answer 1

You can simply use the links and the scrollIntoView method (with behavior: 'smooth' for smooth scrolling). These are just a few lines of code and do not require a package.

Say this is what you want to scroll to

 <p ref={this.myRef} className="scrollToHere">[1] ...</p> 

And some kind of button

 <button onClick={() => {this.scroll(this.myRef)}} className="footnote">[1]</button> 

to call the scroll method

 class App extends Component { constructor() { super() this.myRef = React.createRef(); scroll(ref) { ref.current.scrollIntoView({behavior: 'smooth'}) } } 

UPDATE: since this method is not yet supported by all browsers (browser support overview ), you can use polyfill .

Answer 2

window.scroll({top: 0, left: 0, behavior: 'smooth' }) works for me.

You also need to check browser compatibility.

Or use polyfill

---

Change: for completeness, here's how to dynamically populate using a web package.

 if (!('scrollBehavior' in document.documentElement.style)) { //safari does not support smooth scroll (async () => { const {default: smoothScroll} = await import( /* webpackChunkName: 'polyfill-modern' */ 'smoothscroll-polyfill' ) smoothScroll.polyfill() })() } 

Thanks to this dynamic multi-movie, the package is downloaded via ajax if the browser does not support smooth scrolling.

polyfill-modern is an arbitrary chunk name that hints the web package compiler to combine packages to reduce the number of server requests.

Answer 3

A few good packages are already there that can handle this for you:

https://github.com/fisshy/react-scroll - Demo

https://www.npmjs.com/package/react-scroll-to-component Simple component scroll

Hope this helps!

Answer 4

React has several libraries for scrolling to anchors. The choice depends on the features you are looking for and on the existing setup of your page.

React Scrollable Anchor is a lightweight library specifically designed to scroll to anchors tied to URL hashes. It also updates the hash URL based on the currently concentrated section. [Full disclosure: I am the author of this library]

React Scroll, mentioned in another answer, is a more full-featured library for scrolling to anchors without reflecting the location in the URL.

You can also connect something like React Router Hash Link Scroll if you are already using React Router, which will also be bound to the hash of the URL.

Answer 5

I really like the reaction router website in the API section, they seem to use this scrollToDoc component, which is a really nice translation of the typical VanillaJS smooth scroll function in React, which depends on react-motion !

Answer 6

The easiest way to do: -

 window.scrollTo({top: 0, left: 0, behavior: 'smooth' }); 

This simple JavaScript code works with all browsers.