[解決済み] スクロール方向の検出
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);
関連
-
[解決済み】JavaScriptで「無効な日付」のDateインスタンスを検出する
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] JavaScriptでページの一番上までスクロールする?
-
[解決済み] jQueryでドロップダウンリストの選択値を変更する
-
[解決済み] JavaScriptでURLの#hashを確認する方法は?
-
[解決済み] jQueryで画像をプリロードする
-
[解決済み] Can I make a <button> not submit a form?
-
[解決済み] アンカーリンクをクリックしたときのスクロールを滑らかにする
-
[解決済み】未定義のオブジェクトプロパティを検出する
-
[解決済み】スクロールを一時的に無効にする方法は?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JSクロスドメインソリューション リアクト構成 リバースプロキシ
-
Vueはランニングライト形式のテキストを水平方向にスクロールする機能を実装している
-
vue3.0プロジェクトのアーキテクチャを構築するための便利なツール
-
JavaScriptのクロージャの説明
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み】"フォームが接続されていないため、フォームの送信がキャンセルされました "というエラーの取得について
-
[解決済み] Web API エラー - このリクエストはブロックされました; コンテンツは HTTPS で提供されなければなりません
-
[解決済み】React - TypeError: 未定義のプロパティ 'props' を読み取ることができない。
-
[解決済み】 env: node: macにそのようなファイルやディレクトリはありません
-
フロントエンド非同期(アシンク)ソリューション(全ソリューション)