检测滚动方向

所以我试图使用on scroll JavaScript来调用一个函数。 但我想知道，如果我可以检测到滚动的方向，而不使用jQuery。 如果没有，那么是否有任何解决方法？

我想只是把一个'顶部'button，但如果我可以避免。

我现在只是尝试使用这个代码，但它没有工作：

 if document.body.scrollTop <= 0 { alert ("scrolling down") } else { alert ("scrolling up") } 

Answer 1

可以通过存储以前的scrollTop值并将当前的scrollTop值与它进行比较来检测。

JS：

 var lastScrollTop = 0; // element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element. element.addEventListener("scroll", function(){ // or window.addEventListener("scroll".... var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426" if (st > lastScrollTop){ // downscroll code } else { // upscroll code } lastScrollTop = st; }, false); 

Answer 2

使用此来查找滚动方向。 这只是find垂直滚动的方向。 支持所有的跨浏览器。

  var scrollableElement = document.getElementById('scrollableElement'); scrollableElement.addEventListener('wheel', findScrollDirectionOtherBrowsers); function findScrollDirectionOtherBrowsers(event){ var delta; if (event.wheelDelta){ delta = event.wheelDelta; }else{ delta = -1 * event.deltaY; } if (delta < 0){ console.log("DOWN"); }else if (delta > 0){ console.log("UP"); } } 

例

Answer 3

您可以使用document.documentElement.scrollTop获取滚动条的位置。 然后把它和以前的位置比较就可以了。

Answer 4

简单的方法来捕捉所有的滚动事件（触摸和滚轮）

 window.onscroll = function(e) { // print "false" if direction is down and "true" if up console.log(this.oldScroll > this.scrollY); this.oldScroll = this.scrollY; } 

Answer 5

这是prateek已经回答的补充。在IE中的代码似乎有一个小故障，所以我决定修改它没有什么奇特（只是另一个条件）

 $('document').ready(function() { var lastScrollTop = 0; $(window).scroll(function(event){ var st = $(this).scrollTop(); if (st > lastScrollTop){ console.log("down") } else if(st == lastScrollTop) { //do nothing //In IE this is an important condition because there seems to be some instances where the last scrollTop is equal to the new one } else { console.log("up") } lastScrollTop = st; });});