1

これは前の質問のフォローアップ投稿です：jQuery-x秒ごとに下にスクロールしてから、一番上にスクロールします

スクリップをもう少し洗練しましたが、最後のステップで少し問題があります。

私はそれが一番下に達するまで一度に自動的に50pxのdivを持っています、その時点でそれは一番上にスクロールして再び始まります。上記の質問のおかげで、少し追加作業を行うだけで、これは完全に機能しています。

divにカーソルを合わせたら、すべてのスクロールを停止する必要があります。私はすでにこれの一部を実行しましたが（ホバー時に下にスクロールする増分はありません）、全体像を把握することはできません。ホバーした場合でも、divは一番上までスクロールします。

これが私のjQueryとそれに伴うフィドルです：http：//jsfiddle.net/wR5FY/1/

var scrollingUp = 0;
var dontScroll = 0;

window.setInterval(scrollit, 3000);

function scrollit() {
    if(scrollingUp == 0 && dontScroll == 0) {
        $('#scroller').animate({ scrollTop: $("#scroller").scrollTop() + 50 }, 'slow');
    }
}

$('#scroller').bind('scroll', function () {
    if (dontScroll == 0) {
        if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            scrollingUp = 1;      
            $('#scroller').delay(2000).animate({ scrollTop: 0 }, 1000, function() {
                scrollingUp = 0;    
            });
        }
    }
});


$('#scroller').bind('mouseenter', function() {
    dontScroll = 1;
});

$('#scroller').bind('mouseleave', function() {
    dontScroll = 0;
});

フィドルで、黄色の四角が表示されているときにスクローラーdivにカーソルを合わせてみてください。一番上までスクロールするのがわかります。

いくつかのメモ：

  • ホバーとmouseoutではなく、mouseenterとmouseleaveを使用したことに気付くでしょう。これは、div内のすべての子要素が悪影響を及ぼさないようにするために私が見つけることができる最良の方法でした。
  • 潜在的な問題領域は、一番上にスクロールする関数のスクロールイベントにバインドしたという事実です。これにより、ユーザーが手動でアイテムをスクロールしているときに、jQueryがユーザーに対してスクロールしようとしているときに、いくつかの追加の問題が発生する可能性があると思います。
  • setIntervalを強制終了することを少し実験しましたが、トリガーする関数が問題の領域ではないため、これがあまり役立つとは思いませんでした。

ここでの私の全体的な目標は、ユーザーがリストをホバーまたは手動でスクロールしているときに、すべての自動スクロールをロックダウンすることです。これは90％です。彼らがたまたま一番下までスクロールした場合、マウスを他の場所に移動するまで何も起こらないはずです-これが問題です。

4

1 に答える 1

1

簡単にしてください;）問題は、最初にdontScrollがゼロであるかどうかを評価してから、タイマーを開始することでした。タイマーが終了すると、dontScrollSTILLがゼロであるかどうかは評価されなくなります。それをあなたのscrollIt関数に引っ張っただけです：

var scrollingUp = 0;
var dontScroll = 0;

window.setInterval(scrollit, 2000);

function scrollit() {
    if(dontScroll == 0){
        if ($('#scroller').scrollTop() + $('#scroller').innerHeight() >= $('#scroller')[0].scrollHeight) {
                scrollingUp = 1;     
                $('#scroller').animate({ scrollTop: 0 }, 1000, function() {
                    scrollingUp = 0;    
                });
        } else if(scrollingUp == 0) {
            $('#scroller').animate({ scrollTop: $("#scroller").scrollTop() + 50 }, 'slow');
        }
    }
}

$('#scroller').bind('mouseenter', function() {
    dontScroll = 1;
});

$('#scroller').bind('mouseleave', function() {
    dontScroll = 0;
});
于 2012-10-28T17:02:25.683 に答える