9

マウスホイール イベント スクリプトを作成しようとしましたが、Apple Magic Mouse とそのスクロール継続機能を使用しているため、いくつかの問題が発生します。

私はこれをやりたいhttp://jsfiddle.net/Sg8JQ/（マウスホイールでスクロール可能なjQueryツールから - http://brandonaaron.net/code/mousewheel/demosを使用して1つの位置をスクロールして停止します）、しかし私は短いボックスにスクロールするときのアニメーション (250ms など)、および 1 つのアニメーション中に複数回スクロールするときに複数のボックスを通過する機能。(スクロールするとアニメーションが 2 番目のボックスにスクロールし始めますが、もう一度スクロールすると 3 番目のボックスに移動し、2 回スクロールすると 4 番目のボックスに移動します。)

stopPropagation//マウスホイールの速度 (および var delta) を "停止" できると最初に考えたので、(おそらくタイマーを使用して) 新しいスクロール イベントの数を数えることができますが、どれもそうではありませpreventDefaultん。return false;

アイデア？

EDIT : これらのマウスで Google カレンダーをスクロールしようとすると、1 つだけでなく複数のカレンダーが切り替わります。彼らもそれを修正できないようです。

EDIT 2：マウスホイールのリスナーを停止できるようになった後、マウスホイールのバインドを解除して再度バインドすると思いました（慣性の最後をリッスンしません）。それはしませんでした。

EDIT 3 : 日付を使用して解決しようとしました (この投稿のおかげで)。最適ではありませんが、何もないよりはましですhttp://jsfiddle.net/eZ6KE/

4

3 に答える 3

1

最善の方法は、タイムアウトを使用して、タイムアウトがまだアクティブであるかどうかをリスナー内で確認することです。

var timeout = null;
var speed = 100; //ms
var canScroll = true;

$(element).on('DOMMouseScroll mousewheel wheel', function(event) {
    // Timeout active? do nothing
    if (timeout !== null) {
        event.preventDefault();
        return false;
    }

    // Get scroll delta, check for the different kind of event indexes regarding delta/scrolls
    var delta = event.originalEvent.detail ? event.originalEvent.detail * (-120) : (
            event.originalEvent.wheelDelta ? event.originalEvent.wheelDelta : (
                    event.originalEvent.deltaY ? (event.originalEvent.deltaY * 1) * (-120) : 0
    ));

    // Get direction
    var scrollDown = delta < 0;

    // This is where you do something with scrolling and reset the timeout
    // If the container can be scrolling, be sure to prevent the default mouse action
    // otherwise the parent container can scroll too
    if (canScroll) {
        timeout = setTimeout(function(){timeout = null;}, speed);
        event.preventDefault();
        return false;
    }

    // Container couldn't scroll, so let the parent scroll
    return true;
});

これは任意のスクロール可能な要素に適用できます。私の場合、jQuery ツールのスクロール可能なライブラリを使用しましたが、ブラウザのサポートを改善するために大幅にカスタマイズし、ユース ケースに固有のカスタム機能を追加することになりました。

注意すべきことの 1 つは、複数のイベントがシームレスにトリガーされるのを防ぐのに十分な長さのタイムアウトを確保することです。私のソリューションは、要素のスクロール速度と一度にスクロールする必要がある要素の数を制御したい場合にのみ有効です。リスナー関数の先頭に追加console.log(event)し、連続スクロール周辺機器を使用してスクロールすると、多くのマウスホイール イベントがトリガーされていることがわかります。

厄介なことに、Firefox のスクロール DOMMouseScrollは、マジック マウスや連続スクロール デバイスではトリガーされませんが、スクロールがあり、マウス ホイールのクリック サイクルによって停止する通常のスクロール デバイスではトリガーされます。

于 2015-10-28T00:30:06.400 に答える
0

ホイールの動きが止まったときを検出することはできますが、応答時間が遅くなります。

$(document).mousewheel(function() {
  clearTimeout($.data(this, 'timer'));
  $.data(this, 'timer', setTimeout(function() {
     alert("Haven't scrolled in 250ms!");
     //do something
  }, 250));
});

ソース: jquery マウスホイール: ホイールがいつ停止したかを検出しますか?

または新しいアニメーションの開始を回避するフラグを実装する

var isAnimating=false;

$(document).bind("mousewheel DOMMouseScroll MozMousePixelScroll", function(event, delta) {
   event.preventDefault();
   if (isAnimating) return;
   navigateTo(destination);
});

function navigateTo(destination){
   isAnimating = true;
   $('html,body').stop().animate({scrollTop: destination},{complete:function(){isAnimating=false;}});
}
于 2014-03-11T18:29:40.517 に答える
0

私のウェブサイトでも同様の問題があり、何度も失敗した後、選択したボックスの合計オフセットを計算してアニメーションを最初からやり直す関数を作成しました。次のように見えました。

function getOffset() {
    var offset = 0;
    $("#bio-content").children(".active").prevAll().each(function (i) {
        offset += $(this)[0].scrollHeight;
    });
    offset += $("#bio-content").children(".active")[0].scrollHeight;

    return offset;
}

var offset = getOffset();
$('#bio-content').stop().animate( {
            scrollTop: offset
}, animationTime);

あなたが望むものを達成する方法についてのアイデアを提供してくれることを願っています。

于 2012-11-19T17:17:32.983 に答える