jquery検出ページでスクロールされた％

jQueryを使用して、Webスクロール率を検出します

次のjQueryコードスニペットは、ユーザーがWebページの特定の割合にスクロールしたときにイベントアクションをトリガーする方法を示しています。テストでは、マウススクロールイベントをキャプチャする場合、55％から100％の値を使用することが最適であることが示されています。

$(document).ready(function(){

// 例子：滚动到网页75%时显示一个div
var webpage = $("body");
var webpage_height = webpage.height();
var trigger_height = webpage_height * 0.75;


if ($(window).scrollTop() > (webpage_height-trigger_height)) {
    $("#divtoshow").show();
}

});

jQueryスクロールイベントFAQ（FAQ）

jQueryのスクロールイベントを検出する方法は？

jQueryでのスクロールイベントの検出は非常に簡単です。組み込み.scroll()メソッドを使用できます。このメソッドは、スクロールイベントをトリガーするか、スクロールイベントが発生したときに実行される関数を添付します。簡単な例を次に示します：

$(window).scroll(function(){
  console.log("检测到滚动事件！");
});

このコードでは、最後のスクロール位置を変数に保存します。次に、各スクロールイベントで、現在のスクロール位置を最後のスクロール位置と比較して、スクロールの方向を決定します。

var lastScrollTop = 0;
$(window).scroll(function(){
  var currentScrollTop = $(this).scrollTop();
  if (currentScrollTop > lastScrollTop){
    console.log("向下滚动");
  } else if (currentScrollTop < lastScrollTop) {
    console.log("向上滚动");
  }
  lastScrollTop = currentScrollTop;
});

メソッドは、要素セットの最初の要素と一致するスクロールバーの現在の垂直位置を取得または設定します。パラメーターなしで呼び出されると、パラメーターで呼び出されると、スクロール位置が設定されます。 .scrollTop()

.scrollTop()はい、ページが特定の位置にスクロールするときに関数をトリガーできます。これを行うには、スクロールイベントハンドラーの現在のスクロール位置を確認できます。例は次のとおりです。

このコードでは、スクロール位置が200ピクセルを超えるたびに、「スクロールが200ピクセルを超える」というメッセージがコンソールに記録されます。

jQueryでスクロールイベントをアニメーション化する方法は？

$(window).scroll(function(){
  if ($(this).scrollTop() > 200){
    console.log("滚动超过200像素");
  }
});

$('html, body').animate({
  scrollTop: $("#myDiv").offset().top
}, 2000);

$(document).ready(function(){

// 例子：滚动到网页75%时显示一个div
var webpage = $("body");
var webpage_height = webpage.height();
var trigger_height = webpage_height * 0.75;


if ($(window).scrollTop() > (webpage_height-trigger_height)) {
    $("#divtoshow").show();
}

});

以上がjquery検出ページでスクロールされた％の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。