Jquery Tools Touch 水平只禁用垂直触摸

Posted 2023-02-23

【中文标题】Jquery Tools Touch 水平只禁用垂直触摸

【英文标题】：Jquery Tools Touch horizontal only disable vertical touch

【发布时间】：2012-08-10 00:56:38

【问题描述】：

我有 jquery 工具滚动条...我喜欢它只为 swipeLeft swipeRight 实现触摸选项。

当我使用 touch: true 时，它​​也会在向上/向下滑动时旋转..

我按照这里的说明进行操作：

jQuery Tools Scrollable on touch disable vertical scroll

这里：

http://awardwinningfjords.com/2010/09/22/handling-touch-events-in-jquery-tools-scrollable.html

但似乎没有一个工作..有什么想法吗？我的小提琴/演示如下供参考

小提琴：http://jsfiddle.net/mmp2m/7/

演示：http://jsfiddle.net/mmp2m/7/show

谢谢

【参考方案1】：

如果您使用的唯一控件是 Scrollable，那么您可以从 here 编辑它的源代码，以修复该行为或根据您认为合适的方式对其进行调整。

我修改了您发布的fiddle，在javascript 代码部分中包含Scrollable 控件的代码。

在控件代码中添加的行是以下sn-p末尾带有注释// added的行：

    // touch event
    if (conf.touch) 
        var touch = ;

        itemWrap[0].ontouchstart = function(e) 
            var t = e.touches[0];
            touch.x = t.clientX;
            touch.y = t.clientY;
        ;

        itemWrap[0].ontouchmove = function(e) 

            // only deal with one finger
            if (e.touches.length == 1 && !itemWrap.is(":animated"))             
                var t = e.touches[0],
                     deltaX = touch.x - t.clientX,
                     deltaY = touch.y - t.clientY,
                     absX = Math.abs(deltaX),                              // added
                     absY = Math.abs(deltaY);                              // added

                // Only consider the event when the delta in the
                // desired axis is greater than the one in the other.
                if(vertical && absY > absX || !vertical && absX > absY)    // added
                    self[vertical && deltaY > 0 || !vertical && deltaX > 0 ? 'next' : 'prev']();

                e.preventDefault();
            
        ;
    

我已经在 android 中使用本机和 Opera 浏览器进行了尝试，似乎可以正常工作。

【讨论】：

我尝试修改代码但没有运气...我设置了deltaY = 0 和`vertical && deltaY > 0 ||` 但没有用...但是你的解决方案有效:)你能告诉我什么||和 ？意思是？

?用于表达内联的if语句，其结构为boolean-expr ? then-expr : else-expr;。 || 只是内联 if 语句的 boolean-expr 中使用的逻辑 or 运算符。有关? 操作员的更多信息，请查看此 SO 问题：***.com/questions/10270351/…

有一个小错误 e.preventDefault();防止滑动时向下滚动页面...修复版本在这里jsfiddle.net/shavindra/nvyU8/4

在进行一次更改后效果很好。 e.preventDefault 应该是 if 语句的一部分，否则垂直滚动不会滚动页面。

【参考方案2】：

我在同一个问题上苦苦挣扎了一段时间，直到找到以下解决方法-

初始化-

var $scroller1 = $('#outer-container1').kinetic('y':false);

这会阻止容器上的垂直滚动，但不会将垂直滚动交给浏览器滚动器。

然后转到 jquery 动力学源代码，将所有鼠标和滚动动作事件的 e.preventDefault() 注释掉。

这个技巧对我有用。 https://github.com/davetayls/jquery.kinetic/issues/33