автопрокрутка с анимацией при наведении курсора снизу

Im пытается сделать autoscroll, когда курсор пользователя достигнет почти конца видового экрана.
Я написал код ниже, но он работает только один раз, то есть в первый раз пользователь близко к нижней части он autoscroll 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);
    }
});

1 ответ

  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