スクロール位置をスクロール位置に保存する

Question

スクロール位置に基づいて状態要素を表示および非表示にする反応モジュールを作成しています。私が持っているものは機能的ですが、方向転換にscroll positionを捕らえることができる必要があります。ここで

は、関連するコードスニペットあり、すべてのバインディングとイベントリスナーは機能している：上記_scrollFunction()で

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

} 

、lastScrollPos: thisPosを設定すると、ページが再びスクロール右の前に私のスクロール位置を示します。

私の質問は、スクロール方向が変更されたときのスクロール位置を取得する方法です。私がスクロールアップしてスクロールアップしている場合、私はそれが起こった場所を知る必要があり、その逆もあります。

これについてのアドバイスはありがたいです！ありがとうございました！

Answer 1

現在のdownの値がdownの値と異なるかどうかを_scrollFunctionにチェックインする必要があります。はいの場合はの値を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に取り組んでデモを行いました。