我正在编写一个反向无限滚动组件。（当元素向上滚动时，内容会在到达顶部时开始添加）我已将问题简化为下面的示例。
当元素滚动到顶部时，滚动位置重置为 500，我期望当我继续向上滚动时，ScrollTop 会从 500 减少到 0，当它再次重置为 500 时。等等
如果我使用滚轮，这正是发生的情况，但如果我使用滚动条手柄（并按住），则在滚动位置重置为 500 后，下一个滚动位置始终为 0。
关于如何解决这个问题的任何想法。
这是我演示问题的代码（查看日志）：JsFiddle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test</title>
</head>
<body>
<div id="scroller" style="overflow-y:scroll; height:400px;" onscroll="myFunction()">
<div style="height:600px;">
</div>
</div>
<script>
document.getElementById("scroller").scrollTop = 500;
function myFunction()
{
let top = document.getElementById("scroller").scrollTop;
console.log(top);
if (top == 0)
document.getElementById("scroller").scrollTop = 500
}
</script>
</body>
</html>
在提供的代码中，您面临的问题是由于单击并拖动滚动条手柄触发的滚动事件的行为造成的。拖动后释放滚动条手柄时，似乎将滚动位置重置为 0。 要解决此问题，您可以在将滚动位置重置为 500 之前添加一个延迟，以确保释放滚动条句柄触发的滚动事件不会干扰重置逻辑。这是代码的更新版本，其中包含 setTimeout() 函数来引入延迟： 索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<div id="scroller" style="overflow-y:scroll; height:400px;" onscroll="myFunction()">
<div style="height:600px;"></div>
</div>
<script>
document.getElementById("scroller").scrollTop = 500;
let timeout;
function myFunction() {
let top = document.getElementById("scroller").scrollTop;
console.log(top);
if (top == 0) {
clearTimeout(timeout);
timeout = setTimeout(function() {
document.getElementById("scroller").scrollTop = 500;
}, 100);
}
}
</script>
</body>
</html>
通过在重置滚动位置之前引入一个小的延迟，可以防止因释放滚动条手柄而导致的不良行为。