javascript - 如何在滚动 N 个像素后取消滚动事件

Question

输入:

• 1 个向下滚动事件滚动 100 像素。
• HTML 元素位于页面底部下方 5 个像素处。它不在屏幕上。
• Javascript 函数会检测 HTML 元素的至少 1 个像素何时出现在屏幕上，并且:
  • 自动滚动页面，使元素完全显示在屏幕上。
  • 在动画期间阻止其他滚动事件

事件:

• 用户执行 1 次向下滚动事件(以下称为“滚动事件”)。

预期结果:

• 滚动 6 个像素后 - 当元素的 1 像素可见时 - 滚动事件被取消，并且 JavaScript 函数启动自动滚动。

实际结果:

• 其他滚动事件已正确阻止，但只要滚动事件尚未完成其 100 像素滚动(看起来不稳定)，第一个滚动事件和自动滚动就会发生冲突。

<小时/>

我确实尝试在动画期间对“body”执行“overflow:hidden”，但这并没有取消滚动事件，在自动滚动的动画完成后仍然继续滚动页面(具体使用笔记本电脑触控板)。

有什么想法吗？谢谢!

P.S.:我希望能得到本地 JavaScript 答案。

Answer 1

您可以使用window.pageYOffset

这是一个示例:if 语句中的代码仅在距页面顶部的前 100 像素内运行

window.addEventListener("scroll", function(){
    if(window.pageYOffset < 100) {
        console.log("hi there");
    }
});