Question

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

当我使用touch：true时，它也会在swipeUp / Down时旋转..

我按照说明操作：

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

由于

Answer 1

如果你使用的唯一控件是可滚动，那么你可以从here编辑它的源代码来修复该行为或根据需要调整它。

我修改了您发布的fiddle，以便在JavaScript代码部分中包含可滚动控件的代码。

控件代码中添加的行是以下代码段末尾带有注释// 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浏览器，似乎按预期工作。

Answer 2

我一直在努力解决同样的问题，直到找到以下修复 -

初始化 -

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

这可以防止容器上的垂直滚动，但不会将垂直滚动传递给浏览器滚动条。

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

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

Jquery工具触摸水平仅禁用垂直触摸

2 个答案: