在原生JavaScript中使用$(window).scroll

Question

1. 下面的代码用普通JS该如何实现？

   $(window).scroll(function() { });

2. 我还想要实现滚动动画，例如：

   $('html, body').animate({scrollTop:1750}, 'slow');

我应该使用requestAnimationFrame吗？

http://paulirish.com/2011/requestanimationframe-for-smart-animating/

是否有一些在点击时触发动画而不是连续渲染的示例？

- Neo

Answer 1

问题 1

window.onscroll = function() {
    console.log('scrolling');
};

如果您的目标浏览器支持addEventListener：

window.addEventListener('scroll', function() {
        console.log('scrolling');
});

问题2

在我看来，如果你只是从页面的一个部分滚动到另一个部分，而没有持续运行的滚动动作，那么你可以不使用requestAnimationFrame。

你可以在纯JavaScript中找到很好的实现来滚动到窗口的特定部分，建议查看其源代码（甚至使用它们）。

- freethejazz

---

你能澄清一下你所说的“如果它被支持”的意思吗？这是因为一些浏览器（如IE）不支持addEventListener，还是因为它们不会触发scroll事件？ - Will Brickner

@WillBrickner 我的意思是询问是否支持 addEventListener。现在进行编辑以表明更清晰。 - freethejazz

如果你使用window.onscroll，请小心。如果你有两个函数附加到window，其中一个将不起作用，因为你覆盖了先前的函数。这将导致难以调试的问题。 - Pascal Knecht

这个解决方案是否可以修改，使得函数只在滚动时被调用一次？ - Olga B

@OlgaB 你可以通过将滚动处理程序包装在防抖函数中来实现。你可以在常见的JavaScript库中找到好的实现，或者自己实现防抖（这是理解闭包和高阶函数的好方法）。 - freethejazz

@JonathanF 我知道有一个去抖函数，但从未尝试过。非常感谢！好主意。 :) - Olga B