当光标接近底部时使用动画自动滚动

Question

当用户光标到达几乎视口的尽头时，试图进行自动滚动。
我写了下面的代码，但它只能工作一次，这意味着用户第一次接近底部时，它会自动滚动300px并停止。
只要用户在视口的末端，我怎样才能让它停下来？
为什么它只能工作一次？

$(window).mousemove(function (e) { 
    var currposition = currentYPosition() + 800; 
    var MouseY = event.clientY; 
    if (MouseY > currposition-100) { 
     //Down 
     $('html, body').animate({ 
      scrollTop: 300 // adjust number of px to scroll down 
     }, 1000); 
    } 
}); 

Answer 1

你可以使用这个简单的代码

$(".autoScrollBox").mousemove(function(e){ 
 
    var clientY = e.clientY; 
 
    var boxHeight = $(this).height(); 
 
    var contentHeight = $(".autoScrollBox")[0].scrollHeight; 
 
    var mousePositionProportion = clientY/boxHeight; 
 
    var scrollTop = mousePositionProportion * (contentHeight - boxHeight); 
 
    
 
    //// Top 
 
    if (clientY < boxHeight/2) 
 
     scrollTop -= 50; 
 
    //// Bottom 
 
    else if (clientY > boxHeight - (boxHeight/2)) 
 
     scrollTop += 50; 
 
    
 
    $(".autoScrollBox").scrollTop(scrollTop); 
 
});

.autoScrollBox { 
 
    height: 150px; 
 
    overflow-y: hidden; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
 
<div class="autoScrollBox"> 
 
    <p>1</p> 
 
    <p>2</p> 
 
    <p>3</p> 
 
    <p>4</p> 
 
    <p>5</p> 
 
    <p>6</p> 
 
    <p>7</p> 
 
    <p>8</p> 
 
    <p>9</p> 
 
    <p>10</p> 
 
    <p>11</p> 
 
    <p>12</p> 
 
    <p>13</p> 
 
    <p>14</p> 
 
    <p>15</p> 
 
    <p>16</p> 
 
    <p>17</p> 
 
    <p>18</p> 
 
    <p>19</p> 
 
    <p>20</p> 
 
</div>

见JSFiddle