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

Question

输入：

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

事件：

• 用户执行1次向下滚动事件（在下面提到＆＃34;滚动事件＆＃34;）。

预期结果：

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

实际结果：

• 其他滚动事件被正确阻止，但只要滚动事件没有完成其100px滚动（看起来不稳定），它看起来就像第一个滚动事件和自动滚动一样冲突。

我确实尝试过＆＃34;溢出：隐藏＆＃34;在＆＃34;身体＆＃34;在动画期间，但这不会取消滚动事件，在自动滚动动画完成后（特别是使用笔记本电脑触控板），滚动事件仍会继续滚动页面。

有什么想法吗？谢谢！

P.S。：我会很感激原生的javascript答案。

Answer 1

您可以使用window.pageYOffset

以下是一个示例：if语句中的代码仅在页面顶部的前100px内运行

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