1

複数のページのような錯覚を与えるために内部アンカーを使用する単一ページのWebサイトがあります。ユーザーからマウスホイールを上下に読み取り、それに基づいてユーザーを現在のページの上/下のアンカーに送信するjavascript関数を作成しました。この機能は説明どおりに正常に機能していますが、マウスホイールは非常に敏感であるため、わずかな動きで複数のマウスホイールイベントが発生し、ユーザーは1ページではなく複数ページを上下に送信します。

マウスホイールの高速/低速に関係なく、ユーザーがマウスホイールのいずれかの方向に1ページだけ移動するように、マウスホイール関数を実行できる回数を制限する方法が必要です。私のJavaScriptは以下の通りです。

<script>
$(document).ready(function(){
$("#main").bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
var currentPage = $(".active").attr('href');
switch(currentPage){
case "#publications":
    window.location = $("#menu-item-290 a").attr('href');
    break;
case "#branding":
    window.location = $("#menu-item-106 a").attr('href');
    break;
case "#website-development":
    window.location = $("#menu-item-110 a").attr('href');
    break;
case "#about-us":
    window.location = $("#menu-item-109 a").attr('href');
    break;
case "#contact":
    window.location = $("#menu-item-108 a").attr('href');
    break;
}

}
else {
var currentPage = $(".active").attr('href');
switch(currentPage){
case "#home":
    window.location = $("#menu-item-106 a").attr('href');
    break;
case "#publications":
    window.location = $("#menu-item-110 a").attr('href');
    break;
case "#branding":
    window.location = $("#menu-item-109 a").attr('href');
    break;
case "#website-development":
    window.location = $("#menu-item-108 a").attr('href');
    break;
case "#about-us":
    window.location = $("#menu-item-107 a").attr('href');
    break;
}

}
 });
});
</script>
4

2 に答える 2

0

マウスホイールで直接ページの一部に移動する代わりに、非常に短い時間setTimeout(50 ミリ秒程度) を設定して、次のように目的の場所に移動できます。

case "#home":
    var timeout = null;
    timeout = setTimeout('window.location = $("#menu-item-106 a").attr("href")', 50);
    break;

そうすれば、20 回のマウスホイール イベントが立て続けに発生した場合でも、実行したいアクションを 1 回だけ実行することができます。

于 2012-10-29T14:45:26.643 に答える
0

すでにクエリwheelDeltaを実行しているので、それを使用してみませんか? MSDN によると、「ホイールが回転した距離を 120 の倍数で表します」。したがって、if ステートメントを次のように変更し、for 負の数に>= 360を追加するだけです。ifelse

于 2012-10-29T14:59:13.820 に答える