我希望頁面向下滾動，當我的 cursor 接近頁面頂部或底部時自動頂部

Question

例如，我希望頁面在我接近時自動向下滾動，直到底部有 10px 的空間。 當我向上移動 cursor 時，我希望發生同樣的情況。

 #list-container{ background-color: rebeccapurple; cursor: default; overflow-y: auto; height: 200px; padding: 10px; } #list{ padding: 10px; margin: 10px; }

 <div id="list-container"> <ol id="list" > <li>zero</li> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> <li>seven</li> <li>eight</li> <li>nine</li> <li>ten</li> <li>eleven</li> <li>twelve</li> <li>thirteen</li> <li>fourteen</li> <li>fifteen</li> </ol> </div>

Answer 1

檢查以下代碼，它可能會有所幫助：

let false = false;

window.addEventListener('scroll', () => {
    if(window.innerHeight + window.scrollY >= document.body.offsetHeight - 1000 && ready)
    {
        ready = false;
        << your code here >>
    }
});

Answer 2

我能夠像這些人一樣解決我的問題，我希望我能幫助別人

 $("body").bind("mouseover", function (e) {
        e = e || window.event; var cursor = { y: 0 }; cursor.y = e.pageY; //Cursor YPos
        var papaWindow = parent.window;
        var $pxFromTop = $(papaWindow).scrollTop();
        var $userScreenHeight = $(papaWindow).height();

        if (cursor.y > (($userScreenHeight + $pxFromTop) / 1.15)) {

          if ($pxFromTop < ($userScreenHeight * 3.2)) {

            papaWindow.scrollBy(0, ($userScreenHeight / 30));
          }
        }
        else if (cursor.y < (($userScreenHeight + $pxFromTop) * 0.75)) {

          papaWindow.scrollBy(0, -($userScreenHeight / 30));

        }
      });

以及綁定到“body”后您的代碼在哪里結束

$("body").unbind("mouseover");

如果我們不希望它跟隨我們的鼠標，我們必須取消綁定它