javascript - 拖放失败的窗口滚动

Question

我尝试制作一个无限滚动，但我的滚动绑定不能完美地工作......根本:(

 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);

所以我想拖放我的视口（div）以滚动文档。这是可行的，但是当我打印 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] 

正如你所看到的，我有差距很大的正负值，而不是连续的负值。

我不明白为什么......我怀疑窗口对象太慢而无法绑定“滚动”事件而mouseMove事件已经触发......但我不知道如何解决这个错误......

（在此之前，我的视口上有一个滚动条溢出，我没有这个错误。这就是我怀疑窗口对象的原因）

Answer 1

我发现了问题:) 只需使用 clientX/Y(ref window) 而不是 pageX/Y(ref Document top/left)。