当 css 文件包含这样的指令时:
body {
width: 100%;
height: 100%;
}
像下面这样的 JS 代码不会检测到滚动事件。
$(window).on('scroll', function(){
alert('this alert does not fire');
});
我想对于那个 css，不可能有滚动事件，因此滚动事件不会触发的原因。
所以我把整个页面正文内容都包裹到一个div中，像这样:
<body>
<div canvas="container">
the entire page content here
</div>
</body>
在这种情况下，下面 JS 代码的正确版本是什么，以便我们能够及时捕获这些警报？
$(window).on('scroll', function(){
if( $(window).scrollTop()>50 ){
alert('1');
}
else {
alert('2');
}
});
最佳答案
当页面样式如下:
body {
width: 100%;
height: 100%;
您无法监听窗口滚动事件，因为没有可滚动的内容。 相反，您可以使用 mouse wheel event :
$(window).on('wheel', function(){
console.log('this alert fires');
});body {
width: 100%;
height: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>更新
您可以处理以下事件:
- 滚轮(当您使用鼠标滚轮时)
- mousedown(当你点击文档的滚动条滚动时)
- keydown(ctrl+home、ctrl+hend、上下箭头、pgdown 和 pgup:键盘滚动)
新代码段:
$(document).on('wheel mousedown keydown', function(e){
if (e.type == 'wheel' || (e.target.id == 'full-content-div' && e.type == 'mousedown' && e.clientX >= $('div[canvas="container"]').width()) ||
(e.type == 'keydown' && ((e.ctrlKey && (e.keyCode == 36 || e.which == 35)) ||
(!e.ctrlKey && (e.keyCode == 33 || e.which == 34 || e.which == 38|| e.which == 40))))
) {
console.log(e.type + ' event');
}
});div[canvas="container"]{
width: 100%;
height: 100vh;
overflow: scroll;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div canvas="container" id="full-content-div">
the entire page content here
</div>关于javascript - 在页面范围的 div 上检测滚动事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40495793/