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 和 window 高度。如果相差小于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>

jQuery 页面根据鼠标位置上下滚动

jQuery page up and down scroll based on mouse position

javascript

jquery

scroll

event-handling