jQuery抓取內容並水平滾動頁面

我的目標是抓取內容x並在鼠標移動時水平滾動頁面，直到鼠標停止（mouseup事件），類似於平板電腦刷卡操作。jQuery抓取內容並水平滾動頁面

似乎很容易.. 獲取clientX上的mousedown， scrollLeft通過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/

來源

2012-12-18 John Clagg

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

非常接近。只需從pageX中減去clientX，並在停止函數中使用false,true將給你想要的效果，我想。

here's the fiddle!

來源

2012-12-18 05:24:36 Ohgodwhy

漂亮！是的，這是預期的效果。 –

間歇性地，它不停止mousemove函數..可能這是一個javascript錯誤，不捕獲mouseup事件來停止mousemove函數嗎？ –

我發現mouseup問題的問題，如果mouseup事件在div外觸發，它不會關閉mousemove事件。我添加了刪除鼠標移動mousemove事件的功能 - 感謝您的幫助:) –

jQuery抓取內容並水平滾動頁面

回答

相關問題