React 滾動條應用實例

1、恢復頁面狀態

我們知道 React 不提供狀態恢復，即返回上一個頁面的時候，頁面會從0開始，獲取數據、渲染，一般爲了提升用戶體驗，我們需要做一下狀態恢復，這裏面不僅僅包含頁面數據，還包含頁面滾動的位置，這個時候就需要知道，滾動條距離頂部的距離？
如何獲取呢？

//頁面即將銷燬的時候 合適的位置調用 保存滾動距離
let scrollTop = document.querySelector("#滾動條所在的元素id").scrollTop;

scrollTop 就是滾動的距離。

我們只需要在頁面即將銷燬的時候調用以上代碼，頁面重建的時候，調用以下代碼

ReactDOM.findDOMNode(document.querySelector("#滾動條所在的元素id")).scrollTo(0, 所記錄的滾動距離);

通過以上代碼就可以恢復被銷燬的頁面的用戶滑動頁面的距離，能夠給用戶更好的體驗。

2、監聽滾動條

監聽頁面滑動距離，最常見的應用：

1、詳情頁面，滾動一個屏幕長度之後，顯示滾動到頂部的按鈕。

2、根據滑動距離，動態改變元素樣式。

下面給出第二種的實例代碼

//添加監聽
 componentDidMount() {

   document.querySelector("#監聽元素id").addEventListener('scroll', this.listenScroll);

}

//別忘記移除監聽
componentWillUnmount() {

   document.querySelector("#監聽元素id").removeEventListener('scroll', this.listenScroll.bind(this));

}

// 監聽滾動距離 
 listenScroll() {

//這裏面可以做一些業務上的處理 例如這裏根據滾動距離，來改變元素樣式
        const ele=document.querySelector("#改變樣式的元素id");

        const width = document.documentElement.clientWidth; 

        const scrollHei = document.querySelector("#監聽元素id").scrollTop;

        if(scrollHei>=width-50){

            ele.style.backgroundImage =
                `url(${require("../../assets/images/top_bg.png")})`;

            ele.style.backgroundSize ='100%';


        }else{

            ele.style.backgroundImage ='none';
        }
    }

兩種最常見的使用實例。