jQuery 抓取内容并水平滚动页面

Question

我的目标是在鼠标移动直到鼠标停止（mouseup 事件）时抓取内容 x 并水平滚动页面，类似于平板电脑的滑动动作。

看起来很简单.. 在鼠标按下时获取 clientX， 移动时由 ClientX 向左滚动， 完成后关闭鼠标移动功能。

我已经玩了一段时间了，无法获得我正在寻找的滚动效果..

我在这里做错了什么？

$('#thediv').on('mousedown', function(event) {  
    var e = event;   

    $('#thediv').on('mousemove',function(event){ 
        new_e = event; 
        $('html, body').stop().animate({
            scrollLeft: new_e.clientX  
        }, 300);   
        return false;  
     }); 

    $('#thediv').on('mouseup', function() { 
        $('#thediv').off('mousemove');  
    }); 
}); 

http://jsfiddle.net/mD7mu/

Answer 1

$('#greendiv').on('mousedown', function(e) {
    $('#greendiv').on('mousemove', function(evt) {
        $('html,body').stop(false, true).animate({
            scrollLeft: e.pageX - evt.clientX
        });
    });
});

真的很接近。我认为，只需从 pageX 中减去 clientX ，然后在 stop 函数中使用 false,true 即可获得所需的效果。

here's the fiddle!