javascript - 在 Mac 上的任何浏览器上使用此页面转换时，如何修复滚动发生两次？

Question

我在使用此页面转换插件的网站上遇到一个问题，即转换在 Mac 上发生两次，但在其他平台上工作正常。由于多次触发滚动事件，转换发生两次。无论浏览器如何，此行为仅出现在 Mac 上。

有人对我如何开始解决这个问题有任何想法吗？

这是插件原始页面的链接: https://github.com/HTML50/cubeTransition.js

这是出现问题的演示页面: https://html50.github.io/cubeTransition.js/

我在我的网站上添加了一个滚动延迟，我正在使用插件尝试修复它，但似乎第二次滚动发生在延迟计时器用完之后。这似乎是 Mac 上滚动加速的问题。

$(document).ready(

function () {
    var throttle = 1000;
    var time = -1;
    $(document).mousewheel(function (e, delta) {
        var now = Date.now();
        if (time !== -1 && now - time < throttle)
            return;

        time = now;
        e.preventDefault();
        if (delta < 0) {
            trans('down')
        } else {
            trans('up')
        }
    });
    $(document).keydown(function(e) {
        if (e.keyCode == 38 || e && e.keyCode == 37) {
            trans('up')
        }
        if (e.keyCode == 39 || e && e.keyCode == 40) {
            trans('down')
        }

    });

    $(document).swipe({
        swipe: function(event, direction, distance, duration, fingerCount) {
            if (direction == "up") {
                trans('down')
            } else if (direction == "down") {
                trans('up')
            }
        }
    });


    $('.navitems>li').on('click', function() {
        openIndex($(this).index() + 1);
    });

});

Answer 1

在页面转换插件的创建者和堆栈溢出等各种来源的协作之后，我们找到了一个解决方案。

有人写了一个名为 wheel-indicator.js 的插件，它允许检测触控板并提供各种选项以进行适当的操作。它可以在所有浏览器的 OSX 上完美运行，而不会破坏其他平台。

有关 OSX 和触摸板设备上惯性滚动的更多信息，请查看 JS Fiddle 上的一些演示:

1) http://jsfiddle.net/n7bk6pb9/1/ (滚动图形可视化工具)

var canvas     = $('canvas'),
ctx        = canvas[0].getContext("2d"),
deltas     = [null, null, null, null, null, null, null, null, null],
lastPeak   = 0,
center     = null,
x          = 0;

function resize() {
    ctx.canvas.width  = $(window).innerWidth();
    ctx.canvas.height = $(window).innerHeight();
    center = Math.floor(ctx.canvas.height / 2);
    clear();
    guides();
}

function clear() {
    x = 0;
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function guides() {
    ctx.fillStyle = '#000';
    ctx.fillRect(0, center, ctx.canvas.width, 1);
    ctx.fillStyle = '#0f0';
    ctx.fillRect(0, center - 60, ctx.canvas.width, 1);
    ctx.fillRect(0, center + 60, ctx.canvas.width, 1);
}

function hash() {
    ctx.fillStyle = '#00f';
    ctx.fillRect(x, center + 10, 1, -20);
}

function hasPeak() {
    if (deltas[0] == null) return false;

    var flat = [];
    for (var i in deltas) {
        flat.push(Math.abs(deltas[i]));
    }

    if (
        Math.abs(x - lastPeak) > 10      &&
        flat[0] <  flat[4] &&
        flat[1] <= flat[4] &&
        flat[2] <= flat[4] &&
        flat[3] <= flat[4] &&
        flat[5] <= flat[4] &&
        flat[6] <= flat[4] &&
        flat[7] <= flat[4] &&
        flat[8] <  flat[4]
    ) {
        lastPeak = x;
        return true;
    }
    return false;
}

resize();
guides();

$(window)
.on('resize', resize)
.on('mousewheel DOMMouseScroll', function(e) {
    var delta  = e.type == 'mousewheel' ? e.originalEvent.wheelDelta * -1 : 40 * e.originalEvent.detail;

    if (hasPeak()) hash();
    else if ((deltas[8] == null || Math.abs(deltas[8]) == 120) && Math.abs(delta) == 120) hash();

    ctx.fillStyle = '#f00';
    ctx.fillRect(x, center, 1, delta * -1);

    guides();

    deltas.shift();
    deltas.push(delta);
    x++
  if (x > ctx.canvas.width) clear();
});

2) http://jsfiddle.net/n7bk6pb9/7/ (滚动事件检测)

    // Globals:

var deltas = [null, null, null, null, null, null, null, null, null],
    timer  = null,
    lock   = 0,
    seen   = 0;

// Search for an inertial peak (which represents a trackpade mouse wheel gesture):

function hasPeak() {

    // Decrement the lock.

    if (lock > 0) {
        lock--;
        return false;
    }

    // If the oldest delta is null, there can't be a peak yet; so return.

    if (deltas[0] == null) return false;

    // Otherwise, check for a peak signature where the middle delta (4)
    // is the highest among all other deltas to the left or right.

    if (
        deltas[0] <  deltas[4] &&
        deltas[1] <= deltas[4] &&
        deltas[2] <= deltas[4] &&
        deltas[3] <= deltas[4] &&
        deltas[5] <= deltas[4] &&
        deltas[6] <= deltas[4] &&
        deltas[7] <= deltas[4] &&
        deltas[8] <  deltas[4]
    ) return true;

    // If no peak is found, return false.

    return false;
}

// Handle mouse wheel events:

$(window).on('mousewheel DOMMouseScroll', function(e) {

    // Convert the delta into a usable number (pretty standard).

    var delta  = e.type == 'mousewheel' ? e.originalEvent.wheelDelta * -1 : 40 * e.originalEvent.detail;

    // Check for an inertial peak. And if found, lock the peak
    // checking for 10 more events (decremented in hasPeak on
    // each new event) to prevent the sample window from registering
    // true more than once for each peak.

    if (hasPeak()) {
        lock = 10;
        seen++;
        $('div').text('Inertial Gesture Found! (' + seen + ' total)');
    }

    // Otherwise, check for normal mouse wheel events by assuming
    // past and present deltas would be 120 exactly, and skip nulls.

    else if ((deltas[8] == null || deltas[8] == 120) && Math.abs(delta) == 120)
        $('div').text('Mouse Wheel Event Found!');

    // Shift the deltas backward and add the newest (maintaining the sample window).

    deltas.shift();
    deltas.push(Math.abs(delta));

    // Clear the notification (demonstration purposes, only).

    clearTimeout(timer);
    timer = setTimeout(function() {
        $('div').text('Waiting ...');
    }, 200);
});