Question

我正在使用基于触摸的iPad幻灯片，使用可滚动的Jquery工具

http://jquerytools.org/demos/scrollable/vertical.html

它效果很好，可以做我想要的一切，但是如果我的手指在滑块上任何地方并且稍微移动一下它会触发滑块来改变滑块，有没有办法可以改变你需要拖动手指的程度更改幻灯片，或设置可以滑动以更改幻灯片的特定区域？

Answer 1

您在对象的“构造函数”上禁用触摸事件，如下所示：

            root = $('#content').scrollable({
                keyboard:false,
                mousewheel: false,
                touch: false
            });

Answer 2

我需要做类似的事情，其中Scrollable在iPad上过于敏感。这是我改变的原因，使其对水平滑动不太敏感：

// 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;
            self[vertical && deltaY > 0 || !vertical && deltaX > 0 ? 'next' : 'prev']();                
            e.preventDefault();
        }
    };
}

变为

// 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;
            if(deltaX > 200 || deltaX < -200) { // new line
                self[vertical && deltaY > 0 || !vertical && deltaX > 0 ? 'next' : 'prev']();    
            } // new line
            e.preventDefault();
        }
    };
}

将200调整为远远超过您希望人们在更改为下一张幻灯片之前必须拖动他们的手指。同样，如果要控制垂直滚动条，请将新代码中的deltaX更改为deltaY：

if(deltaY > 200 || deltaY < -200) { // new line
  self[vertical && deltaY > 0 || !vertical && deltaX > 0 ? 'next' : 'prev']();    
} // new line

如果您正在使用jQuery Tools的最小化版本，则可以使用以下代码：

// horizontal change
if(h > 200 || h < -200) {
  b[j && d > 0 || !j && h > 0 ? "next" : "prev"]();
}

// vertical change
if(d > 200 || d < -200) {
  b[j && d > 0 || !j && h > 0 ? "next" : "prev"]();
}

jQuery工具可滚动触摸触发器

2 个答案: