Question

我想问一下滚动监听器。我想在主体上添加滚动侦听器，但它似乎不起作用。

$('body').scroll(function(){
  console.log('SCROLL BODY');
});

我在fiddle上创建基本示例，有人可以解释为什么它不起作用吗？对不起nubies问题...

Answer 1

尝试：

$(window).scroll(function(){
  console.log('SCROLL BODY');
});

所有浏览器都应支持此功能。

Answer 2

由于正文不滚动，window为。

在This example中，您将看到绑定到父container的事件侦听器正在触发，因为该元素实际上是滚动的。

HTML看起来像这样：

<div id="container">
    <p id="content">some text</p>
</div>

CSS看起来像这样：

#container {
    height: 200px;
    overflow-y: scroll;
}

#content {
    height: 1000px;
}

相关的JS看起来像这样：

$('#container').on('scroll', function() {
    console.log('#container');
});

$('#content').on('scroll', function() {
    console.log('#content');
});

Answer 3

以上所有答案都希望jQuery是使用框架。不可知/简单的JS实现框架看起来像这样

ES 5：

// ES 5 :
document.getElementsByTagName('body')[0].onscroll = function() {
    console.log("scrolling");
};

ES 6（及更高版本）：

// ES 6 (and above)
document.getElementsByTagName('body')[0].onscroll = () => {
    console.log("scrolling");
};

Answer 4

纯JS解决方案

一切都很简单：只需使用addEventListener进行滚动事件即可。

document.body.addEventListener('scroll', function( event ) {
    console.log(';{};');
} );

并使body与CSS滚动：

:root {
    overflow: hidden;
}

body {
    overflow-y: scroll;
    max-height: 100vh;
}

我不知道为什么简单的处理程序分配不起作用。如果您知道为什么-请告诉我。

document.body.onscroll = function( event ) {
    console.log('You will never see this message.');
};

您也可以这样做：

document.body.onwheel = function( e ) {
    ...
};

仅当您使用滚轮时才触发此事件（实际上对我来说并不明显），因此，如果使用滚动条滚动页面，则不会触发。

在身体上滚动监听器

4 个答案:

纯JS解决方案