当我的光标靠近页面顶部或底部时,我希望页面自动向下滚动到顶部
I want the page to scroll down, top automatically when my cursor is near the top or bottom of the page
比如我想让页面在我靠近的时候自动向下滚动,直到底部有space的10px。我希望当我向上移动光标时发生相同的情况。
#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").unbind("mouseover");
如果我们不希望它跟随我们的鼠标,我们必须解除绑定它
比如我想让页面在我靠近的时候自动向下滚动,直到底部有space的10px。我希望当我向上移动光标时发生相同的情况。
#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").unbind("mouseover");
如果我们不希望它跟随我们的鼠标,我们必须解除绑定它