當光標接近底部時使用動畫自動滾動

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