カーソルを下に近づけたときにアニメーション付きの自動スクロール

Question

ユーザーカーソルがほぼビューポートの終わりに達したときに自動スクロールしようとしています。
私は以下のコードを書いていますが、一度だけ動作します。これは、ユーザーが最初に底に近づくと300pxを自動スクロールして停止することを意味します。
ユーザーがビューポートの最後にいる間は、どうすればいいですか？
なぜ1回だけ動作するのですか？

$(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