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事件已经开火......但我不知道如何解决这个错误... < / p>

（之前我的视口有一个带有scrollBar的溢出，我没有这个bug。这就是我怀疑窗口对象的原因）

Answer 1

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

拖放窗口滚动失败

1 个答案: