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，则滚动60比当前scrollTop：

更多

$(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页面根据鼠标位置上下滚动

1 个答案: