Jquery鼠标滚轮水平滚动与触控板 [英] Jquery mouse wheel horizontal scrolling with trackpad

问题描述

我正在使用jquery.mousewheel.js插件(Github) 来构建水平滚动网站。它到目前为止工作，但我无法找出一个问题：

如果我使用触控板（例如在MacBook Pro上）并用两根手指水平滚动，根据手指的平行程度，网站会卡住或混淆它应该向哪个方向滚动。

有没有办法让这个水平滚动也能正常工作这是我在头部使用的代码：

  $（function（）{
 $（html，body，*）。mousewheel（function（event，delta）{
 this.scrollLeft  -  =（delta * 5）; 
 this.scrollRight  -  =（delta * 5）; 
 event.preventDefault（）; 
}）; 
}）; 
  

这里我的jsfiddle重建情况： http://jsfiddle.net/mU24m/

解决方案

即使这个问题已经有几个月了，我会留下一些对我有用的东西。

这个想法是跟踪板通常同时在X和Y上移动，所以如果我们检测滚轮监听器中的水平移动它很可能是一个触控板。请注意，您只需向左和向右调整左侧。

  $（。container）。mousewheel（function（ e，delta）{
 
 if（Math.abs（e.deltaX））{
 this.scrollLeft  -  =（e.deltaX * 20）; 
} else {
 this.scrollLeft  -  =（e.deltaY * 20）; 
} 
 
 e.preventDefault（）; 
}）; 
  

你还记得X上有一个动作然后只响应那个轴一秒钟左右：

  var timeout，trackpad = false; 
 
 $（。modernlayout .wrapper）。mousewheel（函数（e，delta）{
 
 if（trackpad || Math.abs（e.deltaX））{ 
 //可能使用触控板
 //仅在X轴上响应第二个
 trackpad = true; clearTimeout（超时）; 
 timeout = setTimeout（function（）{trackpad = false;}，1000）; 
 //使用较小的乘数
 this.scrollLeft  -  =（e.deltaX * 10）; 
} else {
 //很可能不是trackpad 
 this.scrollLeft  -  =（e.deltaY * 20）; 
} 
 
 e.preventDefault（）; 
 
}）; 
  

I am using the jquery.mousewheel.js plugin (Github) to build a horizontal scrolling website. It works so far, but I am not able to figure out one problem:

If I am using a trackpad (e.g. on a MacBook Pro) and scroll horizontally with two fingers, depending on how parallel the fingers are positioned, the site will stuck or is confused in which direction it should scroll.

Is there a way to make this horizontal scroll also working smooth?

This is the code I use in the head part:

$(function () {
    $("html, body, *").mousewheel(function (event, delta) {
        this.scrollLeft -= (delta * 5);
        this.scrollRight -= (delta * 5);
        event.preventDefault();
    });
});

Here my jsfiddle with the rebuilt situation: http://jsfiddle.net/mU24m/

解决方案

even if this question is a couple of months old, I'll leave something that worked for me.

The idea is that trackpads usually move simultaneously on X and Y, so if we detect a horizontal movement in the scroll wheel listener it is likely a trackpad. Note that you only need to adjust left not both left and right.

$(".container").mousewheel( function(e, delta) {

    if( Math.abs(e.deltaX) ) {
        this.scrollLeft -= (e.deltaX * 20);
    } else {
        this.scrollLeft -= (e.deltaY * 20);
    }

    e.preventDefault();
});

You could also remember that there was a movement on X and then only respond to that axis for a second or so :

var timeout, trackpad = false;

$(".modernlayout .wrapper").mousewheel( function(e, delta) {

    if( trackpad || Math.abs(e.deltaX) ) {
        // probably using trackpad
        // only respond on X axis for a second
        trackpad = true; clearTimeout( timeout );
        timeout = setTimeout(function(){ trackpad = false; }, 1000);
        // use a smaller multiplier
        this.scrollLeft -= (e.deltaX * 10);
    } else {
        // most likely not trackpad
        this.scrollLeft -= (e.deltaY * 20);
    }

    e.preventDefault();

});

这篇关于Jquery鼠标滚轮水平滚动与触控板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！