11

ユーザーがマウス スクロールまたは上下矢印を使用してギャラリーをスクロールできるサイトを作成しました。それは私が望むように機能しており、マウスでスクロールするときに1つの画像prスクロールを変更しています。しかし、ユーザーがトラックパッドでスクロールしている場合、一度に 1 つの画像をスクロールすることはほとんど不可能です。

だから私の質問は: ユーザーがトラックパッドでスクロールしているかどうかを確認し、スクロールの動作を変更して感度を下げ、一度に 1 つの画像をスクロールしやすくする方法はありますか?

私はjqueryがあまり得意ではありません。これまでの私のソリューションは、いくつかのスクリプトからまとめられています。

http://jsfiddle.net/MukuMedia/PFjzX/33/

誰かが私を助けてくれることを願っています:)

4

5 に答える 5

4

いいえ、これは不可能です。私が考えることができる唯一の解決策は、スクロール速度に制限を設定することです。コードを解読しようとするつもりはありませんがtimedOut、新しい画像にスクロールするたびに変数をゼロに初期化して 1 に設定することをお勧めします。a を使用しsetTimeout()て、たとえば 50ms 後にゼロに戻します。新しい画像にスクロールする前に、この変数をチェックして、timedOutゼロの場合にのみスクロールしてください。(必ずチェックsetTimeoutの内側に配置してtimedOutください。そうしないと、マウスホイールが動くたびに常に呼び出されてしまいます。これは望ましくありません。)

于 2012-09-18T22:55:15.683 に答える
1

これは、DC_ が提案したものとほとんど同じです。実際の実装なので、これを投稿すると思いました。

// similar to _.debounce, but was having issues with it, so I made this.
function rateLimit(func, time){
        var callback = func,
                waiting = false,
                context = this;
        var rtn = function(){
            if(waiting) return;
            waiting = true;
            var args = arguments;
            setTimeout(function(){
                waiting = false;
                callback.apply(context, args);
            }, time);
        };
        return rtn;
    }

    function onWheel(e){
      // Add your code here
    }

    // will only fire a maximum of 10 times a second
    var debouncedOnWheel = rateLimit(onWheel, 100);
    window.addEventListener("wheel", debouncedOnWheel);
于 2014-01-10T18:49:13.907 に答える
0

ユーザーがタッチパッドを使用しているかどうかを検出するソリューションを見つけました。それはうまく機能し、2つの小さな欠点しかありません.

まず、最初に発生したイベントの後にマウススクロールを検出するため、何もしないマウスホイールで1回クリックします。しかし、これは最初だけです。次に、2 番目の小さな問題につながる値をキャッシュできます。ユーザーがトラックパッドとホイール付きのマウスを持っている場合、最初に使用されたものを検出します。私にとって、それらの問題は取るに足らないものです。ここにコード

var scrolling = false;
var oldTime = 0;
var newTime = 0;
var isTouchPad;
var eventCount = 0;
var eventCountStart;

var mouseHandle = function (evt) {
    var isTouchPadDefined = isTouchPad || typeof isTouchPad !== "undefined";
    console.log(isTouchPadDefined);
    if (!isTouchPadDefined) {
        if (eventCount === 0) {
            eventCountStart = new Date().getTime();
        }

        eventCount++;

        if (new Date().getTime() - eventCountStart > 50) {
                if (eventCount > 5) {
                    isTouchPad = true;
                } else {
                    isTouchPad = false;
                }
            isTouchPadDefined = true;
        }
    }

    if (isTouchPadDefined) { // in this if-block you can do what you want
        // i just wanted the direction, for swiping, so i have to prevent
        // the multiple event calls to trigger multiple unwanted actions (trackpad)
        if (!evt) evt = event;
        var direction = (evt.detail<0 || evt.wheelDelta>0) ? 1 : -1;

        if (isTouchPad) {
            newTime = new Date().getTime();

            if (!scrolling && newTime-oldTime > 550 ) {
                scrolling = true;
                if (direction < 0) {
                    // swipe down
                } else {
                    // swipe up
                }
                setTimeout(function() {oldTime = new Date().getTime();scrolling = false}, 500);
            }
        } else {
            if (direction < 0) {
                // swipe down
            } else {
                // swipe up
            }
        }
    }
}

document.addEventListener("mousewheel", mouseHandle, false);
document.addEventListener("DOMMouseScroll", mouseHandle, false);
于 2015-07-02T22:05:08.567 に答える