窗口滾動拖放失敗

我嘗試做一個無限滾動，但我的滾動綁定不能很好地工作......在所有:(窗口滾動拖放失敗

var dragStart = function (event) { 

     var downPosX = event.pageX; 
     var downPosY = event.pageY; 
     var oldposScroll = $(window).scrollTop(); 

     document.body.focus(); 

     var dragMove = function (event) { 
      var movePosX = event.pageX; 
      var movePosY = event.pageY; 
      var deltaPosX = movePosX - downPosX; 
      var deltaPosY = movePosY - downPosY; 
      var movetop = oldposScroll + (deltaPosY * -1); 

      console.log('[movePosY = ' +movePosY+'] [deltaPosY = ' +deltaPosY+'] [movetop = ' + movetop + '] '); 

      $(window).scrollTop(movetop); 

      downPosX = movePosX; 
      downPosY = movePosY; 
      oldposScroll = movetop; 
     }; 

     var dragStop = function (event) { 
      $(window).unbind('mousemove', dragMove).unbind('mouseup', dragStop); 
     }; 

     $(window).mousemove(dragMove).mouseup(dragStop); 

     event.preventDefault(); 
    }; 


$(window).on("scroll", function (event) { 
      console.log('rendering'); 
     }); 

$viewport.mousedown(dragStart);

所以我想拖放我視（。格）以滾動文檔這是工作，但我有一些瘋狂的結果，當我打印的delta值：不是連續底片值

[movePosY = 552] [deltaPosY = 8] [movetop = 440] 
infini...port.js (ligne 33) 
[movePosY = 543] [deltaPosY = -9] [movetop = 449] 
infini...port.js (ligne 33) 
[movePosY = 551] [deltaPosY = 8] [movetop = 441] 
infini...port.js (ligne 33) 
[movePosY = 540] [deltaPosY = -11] [movetop = 452] 
infini...port.js (ligne 33) 
[movePosY = 550] [deltaPosY = 10] [movetop = 442] 
infini...port.js (ligne 33) 
[movePosY = 539] [deltaPosY = -11] [movetop = 453] 
infini...port.js (ligne 33) 
[movePosY = 549] [deltaPosY = 10] [movetop = 443]

正如你所看到的，我有很大的積極和消極值gap。

我不明白爲什麼......我懷疑窗口對象太慢，無法綁定「滾動」事件，而mouseMove事件已經開火......但我不知道如何解決這個bug ...

（之前，我有一個scrollBar我的視口溢出，我沒有這個錯誤。這就是爲什麼我懷疑窗口對象）

來源

2012-08-07 Frédéric GRATI

我發現問題:) 只使用clientX/Y（ref窗口），而不是pageX/Y（參考文檔頂部/左）。

來源

2012-08-07 13:12:11

窗口滾動拖放失敗

回答

相關問題