0

無限スクロールを作成しようとしましたが、スクロールバインディングが完全に機能しません...まったく:(

 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) をドラッグ アンド ドロップします。それは機能しますが、デルタ値を出力すると、おかしな結果が得られます:

[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 イベントが既に発生しているときに、window オブジェクトが「スクロール」イベントをバインドするには遅すぎると思われます...しかし、このバグを解決する方法がわかりません...

(その前に、ビューポートで scrollBar を使用してオーバーフローが発生しましたが、このバグはありませんでした。そのため、ウィンドウ オブジェクトが疑われます)

4

1 に答える 1

0

問題が見つかりました:) pageX/Y(ref Document top/left)の代わりにclientX/Y(ref window)を使用してください。

于 2012-08-07T13:12:11.950 に答える