Question

当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');
   }
});

Answer 1

当页面的样式如下：

body {
    width: 100%;
    height: 100%;

}

您无法侦听窗口滚动事件，因为无法滚动。相反，您可以使用mouse wheel event：

＆＃13;

$(window).on('wheel', function(){
  console.log('this alert fires');
});

＆＃13;

body {
  width: 100%;
  height: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

<强>更新

您可以处理以下事件：

轮（当您使用鼠标滚轮时）
mousedown（当您单击要滚动的文档的滚动条时）
keydown（ctrl + home，ctrl + hend，down-up arrow，pgdown和pgup：键盘滚动）

新代码段：

＆＃13;

$(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');
  }
});

＆＃13;

div[canvas="container"]{
  width: 100%;
  height: 100vh;
  overflow: scroll;
}

＆＃13;

<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>

＆＃13;

检测页面范围div上的滚动事件

1 个答案: