將滾動位置存儲在滾動方向更改

Question

我正在處理顯示和隱藏基於滾動位置的狀態元素的反應模塊。我擁有的是功能性，但我需要能夠在方向改變時捕獲scroll position。

下面是相關的代碼片段，所有綁定和事件監聽器功能：

this.state = { 
    lastScrollPos: 0, 
    down: true 
}; 

_scrollFunction() { 
    const thisPos = window.pageYOffset; 
    const down = thisPos > this.state.lastScrollPos; 

    if (down) { 
    this.setState({ 
     down: true, 
     lastScrollPos: thisPos 
    }); 
    } else if (!down) { 
    this.setState({ 
     down: false, 
     lastScrollPos: thisPos 
    }); 
    } 

} 

在上面_scrollFunction()，設置lastScrollPos: thisPos給我的頁面滾動再次向右前滾動位置。

我的問題是如何捕獲滾動方向改變時的滾動位置。如果我向下滾動然後向上滾動，我需要知道它發生的地方，反之亦然。

對此表示讚賞！謝謝！

Answer 1

您應該檢查_scrollFunction電流down值是否與down值不同。如果是，則將thisPos值寫入changedPos狀態變量。

工作例如：

constructor() { 
    super(); 

    this.state = { 
    lastScrollPos: 0, 
    changedPos: undefined, 
    down: true 
    }; 
} 

_scrollFunction() { 
    const thisPos = window.pageYOffset; 
    const down = thisPos > this.state.lastScrollPos; 
    // If current `down` value is differs from `down` from state, 
    // assign `thisPos` to variable, else assigning current `changedPos` state value. 
    const changedPos = down !== this.state.down ? thisPos : this.state.changedPos; 

    this.setState({ 
    lastScrollPos: thisPos, 
    changedPos, 
    down 
    }); 
} 

而且，我做了對CodePen工作演示，你可以檢查出來，瞭解更多信息。