ホームページ > 記事 > ウェブフロントエンド > 記事の「ハウツー」の側面に焦点を当てた、いくつかのタイトルのオプションを次に示します。 * jQueryを使用せずにJavaScriptでスクロール方向を検出する方法 * JavaScript のスクロール方向検出: シム
jQuery を使用しないスクロール方向の検出
JavaScript を使用してスクロール時に関数を実行する場合、スクロールの方向を知ると有益な場合があります。 jQuery を使用しない場合、これは、以前のscrollTop 値を保存して比較するソリューションを実装することで実現できます。
ソリューション
次の JavaScript コードは、スクロール方向を効果的に検出します。
<code class="javascript">var lastScrollTop = 0; // Customize this to target the desired element for scroll detection. document.addEventListener("scroll", function() { var st = window.pageYOffset || document.documentElement.scrollTop; if (st > lastScrollTop) { // Code to execute when scrolling down } else if (st < lastScrollTop) { // Code to execute when scrolling up } // Reset the lastScrollTop value to prevent false negatives on mobile devices. lastScrollTop = st <= 0 ? 0 : st; }, false);</code>
このソリューションは、jQuery を使用せずにスクロール方向を検出する方法を提供します。 scrollTop の値を保存して比較することで、下スクロールと上スクロールの両方のアクションを効果的に識別します。
以上が記事の「ハウツー」の側面に焦点を当てた、いくつかのタイトルのオプションを次に示します。 * jQueryを使用せずにJavaScriptでスクロール方向を検出する方法 * JavaScript のスクロール方向検出: シムの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。