対応するスクロールアニメーションを処理する

Question

とは何ですか？ Reactのスクロール位置を扱う方法はありますか？より良いUXのためスムーズなスクロールが本当に好きです。 ReactでDOMを操作することは反パターンであるため、私は問題に遭遇しました。スムーズにスクロールしてどのような位置や要素にするのですか？私は通常、要素のscrollTop値を変更しますが、これは許可されていないDOM上の操作です。

JSBIN

コード：でこれを達成するための方法

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')); 

がように反応しますか？

Answer 1

そこのカップルは良いパッケージは、すでにそれはあなたのためにこれを処理することができます：

https://github.com/fisshy/react-scroll - コンポーネント

からDemo

https://www.npmjs.com/package/react-scroll-to-component シンプルなスクロールは、この情報がお役に立てば幸い！

Answer 2

Reactのアンカーにスクロールするためのライブラリがいくつかあります。選択するものは、探している機能とページの既存の設定によって異なります。

React Scrollable Anchorは、特にURLハッシュにマップされたアンカーにスクロールするための軽量ライブラリです。現在フォーカスされているセクションに基づいてURLハッシュも更新されます。 [完全公開：私はこの図書館の著者です]

リアクションスクロールは、URLの場所を反映することなく、アンカーにスクロールするためのより完全な機能を備えたライブラリです。

React Routerを既に使用している場合は、React Router Hash Link Scrollのようなものを接続することもできます。これは、あなたのURLハッシュと結び付けられます。