带有拖放的窗口滚动失败

Question

I try to make a infinite scroll but my scroll binding doesn't work perfectly... at all :(

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

So I want to drag and drop my viewport (div) in order to scroll the document. That's works but I have some crazy result when I print the delta value :

[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] 

As you can see, instead of continuous negatives values, I have positives and negatives values with big gap.

I don't understand why... I suspect the window object to be too slow to bind "scroll" Event while mouseMove Event is already fire... but I don't know how resolve this bug...

(Before that I have a overflow on my viewport with a scrollBar and I didn't have this bug. That's why I suspect the window Object)

Answer 1

我发现了问题:)只需使用clientX / Y（参考窗口）而不是pageX / Y（参考文档的顶部/左侧）。