7

divにカーソルを合わせると、ページがスクロールするようにしようとしています。これは私がこれまでに得たものです

$(document).ready(function() {
    $("#hoverscroll").mouseover(function() {
        var div = $('body');
        setInterval(function(){
            var pos = div.scrollTop();
            div.scrollTop(pos + 1);
        }, 100)  
    });
});

http://jsfiddle.net/3yJVF/

ただし、やるべきことが2つあります。クリックするたびに速度を上げ、ホバリングしなくなったら停止し、速度をデフォルトにリセットする必要があります。

私はこのようなことを達成しようとしています:

$(document).ready(function() {
    $("#hoverscroll").mouseover(function() {
        var div = $('body');

        setInterval(function(){
            var count = 1;
            var pos = div.scrollTop();
            div.scrollTop(pos + count);
        }, 100)  
    });

    $("#hoverscroll").click(function() {
        if (count < 6) {
            count = count+1;
        }
    });

    $("#hoverscroll").mouseleave(function() {
        count = 0; 
    });
});

イベントをバインドし、グローバル変数を設定してスクロールしているかどうかを確認することについて話している人を検索して見つけました。しかし、上記の機能は機能しますか？私はまだ学んでいます。私は完全に間違っているかもしれません。

4

4 に答える 4

0

受け入れられた質問が機能しなくなったため、コードを更新しました。

見る：

$(document).ready(function() {
    var count;
    var interval;

    $("#hoverscroll").on('mouseover', function() {
        var div = $('#container');

        interval = setInterval(function(){
            count = count || 1;
            var pos = div.scrollTop();
            div.scrollTop(pos + count);
        }, 100);
    }).click(function() {
        if (count < 6) {
             count = count+1;
        }
    }).on('mouseout', function() {
        // reset the speed on out
        count = 0;
        clearInterval(interval);
    });
})
;

http://jsfiddle.net/wzvowvzn

于 2018-05-23T16:43:18.067 に答える