基于 mousemove 的滚动脚本需要适应触摸屏使用

Question

我有一个 Javascript，它可以根据鼠标的位置从左到右滚动 UL：可以看到一个演示 HERE（网站仍在建设中）我希望它也可以与触摸屏设备一起使用。触摸和“拖动”手指会以类似的方式滚动 UL，点击列表会“点击”图像。

修改 JS 有多容易/多难：

$(function(){
    $(window).load(function(){
        var $gal   = $("#gallerylist.top"),
            galW   = $gal.outerWidth(true),
            galSW  = $gal[0].scrollWidth,
            wDiff  = (galSW/galW)-1,  /// widths difference ratio
            mPadd  = 200,  // Mousemove Padding
            damp   = 20,  // Mousemove response softness
            mX     = 0,   // Real mouse position
            mX2    = 0,   // Modified mouse position
            posX   = 0,
            mmAA   = galW-(mPadd*2), // The mousemove available area
            mmAAr  = galW/mmAA;    /// get available mousemove fidderence ratio   
        $gal.mousemove(function(e) {
            mX = e.pageX - $(this).parent().offset().left - this.offsetLeft;
            mX2 = Math.min( Math.max(0, mX-mPadd), mmAA ) * mmAAr;
        });
        setInterval(function(){
            posX += (mX2 - posX) / damp; /// zenos paradox equation "catching delay"    
            $gal.scrollLeft(posX*wDiff);
        }, 10);
    });
});

Answer 1

有类似于鼠标事件的触摸事件：

$gal.touchstart(function(e) {});
$gal.touchend(function(e) {});
$gal.touchmove(function(e) {});

通常您不需要为“点击”实现触摸事件...它们通常已经同步。

对于 mousemove 事件，从用户的角度来看，在触摸设备上禁用此功能可能更理想。如果页面需要滚动，这可能会干扰该交互。另一种方法可能是在窗口滚动事件上设置一些动画。