jQuery基於鼠標位置的上下滾動

Question

$(document).ready(function() {
    var mouseX;
    var mouseY;
    $(document).mousemove(function(e) {
        mouseX = e.pageX;
        mouseY = e.pageY;
    });
    $("#maincontainer").mousemove(function() {
        // $('#DivToShow').css({'top':mouseY,'left':mouseX}).fadeIn('slow');
        $('#DivToShow').html("Y " + mouseY + " --- " + "X " + mouseX);
        if (mouseY > 230) {
            $('html, body').animate({
                scrollBottom: $elem.height()
            }, 800);
        }
    });
});

請幫忙，我試圖根據指針的位置進行自動上下滾動。 當指針到達瀏覽器底部時，頁面需要向下滾動60px ++。 不能滾動到頁面末尾。

Answer 1

試試這個解決方案。

在mousemove上，獲取clientY和窗口高度。 如果差異小於60，則比當前scrollTop多滾動60：

 $(document).on('mousemove', function(e) { var y = e.clientY; var h = $(window).height(); var n = h - y; if (n < 60) { var t = parseFloat($(window).scrollTop()); console.log(t); $('html,body').animate({scrollTop:t + 60 + 'px'},200); } else { $('html,body').stop(); } }); 

 #wrapper, .section { width:100%; float:left; } .section { height:80px; border:1px solid #ccc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="wrapper"> <div class="section"></div> <div class="section"></div> <div class="section"></div> <div class="section"></div> <div class="section"></div> <div class="section"></div> </div>