![](/img/trans.png)
[英]How use JQuery/Javascript to scroll down a page when the cursor at the top or bottom edge of the screen?
[英]I want the page to scroll down, top automatically when my cursor is near the top or bottom of the page
例如,我希望页面在我接近时自动向下滚动,直到底部有 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>
检查以下代码,它可能会有所帮助:
let false = false;
window.addEventListener('scroll', () => {
if(window.innerHeight + window.scrollY >= document.body.offsetHeight - 1000 && ready)
{
ready = false;
<< your code here >>
}
});
我能够像这些人一样解决我的问题,我希望我能帮助别人
$("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");
如果我们不希望它跟随我们的鼠标,我们必须取消绑定它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.