jQuery Mousewheel不支持触控板？ [英] jQuery Mousewheel doesn't support trackpad?

问题描述

我正在使用流行的鼠标滚轮插件来模拟整页滚动，如本网站。

I'm using the popular mousewheel plugin to to emulate the fullpage scroll like this website.

jQuery(function() {
    var top = 0,
        viewport = jQuery(window).height(),
        step = jQuery(".home .l-section:first").outerHeight(),
        body = jQuery.browser.webkit ? jQuery('body') : jQuery('html'),
        wheel = false;
    jQuery('body').mousewheel(function(event, delta) {
        wheel = true;
        if (delta < 0) {
            top = (top + viewport) >= jQuery(document).height() ? top : top += step;
            body.stop().animate({
                scrollTop: top
            }, 400, function() {
                wheel = false;
            });
        } else {
            top = top <= 0 ? 0 : top -= step;
            body.stop().animate({
                scrollTop: top
            }, 400, function() {
                wheel = false;
            });
        }
        return false;
    });
    jQuery(window).on('resize', function(e) {
        viewport = jQuery(window).height();
        step = jQuery(".home .l-section:first").outerHeight();
    });
    jQuery(window).on('scroll', function(e) {
        if (!wheel) top = jQuery(this).scrollTop();
    });
});

它很好但不是在使用触控板时。使用触控板，它只是滚动到页面的底部，无论我尝试滚动的速度有多慢。

It works great but NOT when using the trackpad. Using trackpad, it just scrolls to the bottom of the page no matter how slowly I try to scroll.

推荐答案

适合我的笔记本电脑的触控板。但是，这是已知的问题，你尝试使用去抖动吗？

Works well with my laptop's trackpad. However, this is known issue, did you try using debounce?

function mouseHandle(event) {
    newDate = new Date();
    var scrollAllowed = true;

    if( wheel < 10 && (newDate.getTime()-oldDate.getTime()) < 100 ) {
        scrollPos -= event.deltaY*(10-wheel);
        wheel++;
    }
    else {
        if( (newDate.getTime()-oldDate.getTime()) > 100 ) {
            wheel = 0;
            scrollPos -= event.deltaY*60;
        }
        else {
            scrollAllowed = false;
        }
    }

    oldDate = new Date();

    if( scrollAllowed ) {
        // do your stuff here
    }
}

//Apply this effect with jQuery On event
$('body').on('mousewheel', function(event) { mouseHandle(event); });

这是已报道的问题： https://github.com/brandonaaron/jquery-mousewheel/issues/36

那里你会得到多种解决方案。希望有所帮助。帮助自己： - ）

You will get multiple solutions there. Hope that helps. Help yourself :-)

和平，

Rahul

这篇关于jQuery Mousewheel不支持触控板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！