javascript - 当光标靠近底部时自动滚动动画

Question

我试图在用户光标几乎到达视口(viewport)末端时自动滚动。
我写了下面的代码，但它只工作一次，这意味着用户第一次靠近底部时它会自动向下滚动 300 像素并停止。
只要用户在视口(viewport)的末尾，我怎样才能让它下降？
为什么它只有效一次？

$(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 中更好的示例