1. 首頁
  2. 問答
  3. 處理動畫在React中動畫

處理動畫在React中動畫

2017-06-05 73 views
4

是什麼在React中處理滾動位置的方法？由於更好的用戶體驗，我非常喜歡平滑滾動。由於在React中操作DOM是一種反模式，我遇到了問題：如何順利滾動到某個位置/元素？我通常會更改元素的scrollTop值，但這是對DOM的操作，這是不允許的。處理動畫在React中動畫

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

如何做到這一點的陣營方式？

來源

2017-06-05 sympi

回答

-1

有幾個庫可以滾動到React中的錨。可供選擇的取決於您正在尋找的功能以及您網頁的現有設置。

React Scrollable Anchor是一個輕量級的庫，專門用於滾動到映射到URL散列的錨點。它還根據當前重點部分更新URL哈希值。 [詳細信息：我是該庫的作者]

反應滾動，在另一個答案中提到，是一個更全面的功能庫滾動到錨點，沒有任何反映在URL中的位置。

如果您已經使用了React Router，那麼您還可以搭配類似React Router Hash Link Scroll的東西，這樣也會綁定到您的URL哈希。

來源

2017-07-06 22:22:34 gabergg

+0

既然你是圖書館這樣做的作者，並且op在_how上以反應的方式做了這個，沒有圖書館。 （這就是我如何回答問題，並希望得到答案） –

相關問題

 相關問題