1. ホーム
  2. javascript

[解決済み] スクロール方向の検出

2022-04-21 03:36:34

質問

そこで、私はJavaScriptの on scroll を使用して関数を呼び出すことができます。しかし、私はjQueryを使用せずにスクロールの方向を検出することができるかどうかを知りたいと思いました。もしそうでなければ、何か回避策はありますか?

単に「トップへ」ボタンを設置することも考えていましたが、できればそれは避けたいです。

今、このコードを使ってみましたが、うまくいきませんでした。

if document.body.scrollTop <= 0 {
    alert ("scrolling down")
} else {
    alert ("scrolling up")
}

解決方法は?

を保存することで検出することができます。 scrollTop の値を取得し、現在の scrollTop の値と比較します。

JavaScript。

var lastScrollTop = 0;

// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
element.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
   var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
   if (st > lastScrollTop){
      // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);