向上或向下滚动事件

Question

我想检测用户何时滚动。 我看到对此有一些疑问，但这些答案并没有帮助我。
这是我的代码：

var up = document.getElementById('up');
var down = document.getElementById('down');
function onScroll() {
if (view.scrollTop > 0) {
    console.log("up");
}
if (view.scrollTop < 0) {
    console.log("down");
 }
}
var view = document.getElementById('container');
view.addEventListener("wheel", onScroll);

编辑：“滚动”而不是“轮子”对我不起作用...我必须拥有“轮子”。 当我做：

if (view.scrolltop <=0) {
    console.log("down");
 } 

我进入控制台“向下”，但是当我向上滚动时也会出现！ 我的页面在屏幕的100％中，而且没有滚动条（而且我也不想拥有）。

EDIT2：这是解决我的问题的代码！

window.addEventListener('wheel', function (e) {
if (e.deltaY < 0) {
    console.log("scrolling up");
 }
if (e.deltaY > 0) {
    console.log("scrolling down");
 }
});

Answer 1

您可以使用

window.onscroll

获取滚动事件，然后使用

.scrollTop 

确定距页面顶部或元素的偏移量。

window.onscroll = function() { scrollFunction() };

scrollFunction() {

 //code to check if it is scrolling up or down
}

希望这是一个有益的开始。

Answer 2

我用jquery方法做到了

var last = 0;
$(window).scroll(function(event){
   var Pos = $(this).scrollTop();
   if (Pos > last ){
       // down
   } else {
      // up
   }
   last = Pos;
});

Answer 3

支持@Belmin Bedak的评论。

使用.scroll而不是.wheel ：

 var up = document.getElementById('up'); var down = document.getElementById('down'); function onScroll() { if (view.scrollTop > 0) { alert("up"); } if (view.scrollTop <= 0) { alert("down"); } } var view = document.getElementById('container'); view.addEventListener("scroll", onScroll); 

 div { border: 1px solid black; width: 200px; height: 100px; overflow: scroll; } 

 <div id='container'>a<br> b<br> c<br> d<br> e<br> f<br> g<br> h<br> i<br> k<br> l<br> </div>