区分jQuery中的向上/向下滚动？

Question

我已经找到了一些使用 jQuery 检查滚动条位置的好方法，但我想知道你是否能区分用户向上或向下滚动了？

- Hanna

---

我知道这很老，但是：https://dev59.com/7W855IYBdhLWcg3weEGJ - Jacques Marais

Answer 1

<script type='text/javascript'>
$(function(){

  var CurrentScroll = 0;
  $(window).scroll(function(event){

      var NextScroll = $(this).scrollTop();

      if (NextScroll > CurrentScroll){
         //write the codes related to down-ward scrolling here
      }
      else {
         //write the codes related to upward-scrolling here
      }

      CurrentScroll = NextScroll;  //Updates current scroll position
  });
});

- Iman Sedighi

---

完美地适用于简单的滚动。正是我所寻找的！ - Matt Pierce

Answer 2

检查最后的状态。类似这样：

保留一个变量，例如last_scroll_position，当您滚动时，如果last_scroll_position - current_position > 0，则用户向上滚动，如果小于0，则向下滚动。

- Gabi Purcaru

---

谢谢。我知道我必须使用这样的变量，只是逻辑没有在我的脑海中注册。 - Hanna

@Gabi Purcaru，如果 last_scroll_position 和 current_position 相同，则结果将为 0，此时如何找到?????? - rynhe

@rynhe 如果 last_scroll_position - current_position == 0，那么用户根本没有滚动。 - Gabi Purcaru

为什么不直接这样写呢？ last_scroll_position < current_position //往下滚动 反之亦然。减去一个数再进行比较是否有一定的原因，而不是直接比较？ - user1816910

简单而有效的解决方案。谢谢（来自阿尔德尔的Multzam :)) - Nahn

Answer 3

为了区分jQuery中的向上/向下滚动，您可以使用以下方法：

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
$('#yourDiv').bind(mousewheelevt, function(e){

    var evt = window.event || e //equalize event object     
    evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible               
    var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF

    if(delta > 0) {
        //scroll up
    }
    else{
        //scroll down
    }   
});

这种方法也适用于具有overflow:hidden的

。

我已经在FireFox，IE和Chrome上成功测试过了。

- Jordi van Duijn

---

非常感谢分享这段代码，它在Opera和Safari上也完美运行... :) - rynhe

太好了 - 我一直在寻找这个... 谢谢@Jordi Van Duijn - Imran Bughio

不错的解决方案！也许你可以看一下这个：***滚轮事件***。 - jherax

Answer 4

纯JavaScript的示例：

var f = (function(){
    var oldPos = window.scrollY;
    function fu(e) {
        var newPos = window.scrollY;
        if (newPos>oldPos) {
            console.log('down');
        } else if(newPos<oldPos) {
            console.log('up');
        } else {
            console.log('same');
        }
        oldPos = newPos;
    }
    return fu;
})();
window.addEventListener('scroll',f);

- Henrik Christensen

Answer 5

滚动事件

滚动事件在火狐浏览器中表现得有些奇怪（由于平滑滚动会触发很多次），但它确实有效。

注意：实际上，滚动事件会在拖动滚动条、使用光标键或鼠标滚轮时被触发。

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "35px"
});

//binds the "scroll" event
$(window).scroll(function (e) {
    var target = e.currentTarget,
        $self = $(target),
        scrollTop = window.pageYOffset || target.scrollTop,
        lastScrollTop = $self.data("lastScrollTop") || 0,
        scrollHeight = target.scrollHeight || document.body.scrollHeight,
        scrollText = "";

    if (scrollTop > lastScrollTop) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    $("#test").html(scrollText +
      "<br>innerHeight: " + $self.innerHeight() +
      "<br>scrollHeight: " + scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>lastScrollTop: " + lastScrollTop);

    if (scrollHeight - scrollTop === $self.innerHeight()) {
      console.log("► End of scroll");
    }

    //saves the current scrollTop
    $self.data("lastScrollTop", scrollTop);
});

---

滚轮事件

你也可以参考MDN提供的 滚轮事件 文档，获得更多有关滚轮事件的信息。

注意： 滚轮事件仅在使用鼠标滚轮时触发；使用方向键或拖动滚动条不能触发该事件。

我阅读了这个文档和示例：在不同浏览器中监听此事件
并通过与 FF、IE、Chrome 和 Safari 的一些测试，得出以下代码片段:

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "15px"
});

//attach the "wheel" event if it is supported, otherwise "mousewheel" event is used
$("html").on(("onwheel" in document.createElement("div") ? "wheel" : "mousewheel"), function (e) {
    var evt = e.originalEvent || e;

    //this is what really matters
    var deltaY = evt.deltaY || (-1 / 40 * evt.wheelDelta), //wheel || mousewheel
        scrollTop = $(this).scrollTop() || $("body").scrollTop(), //fix safari
        scrollText = "";

    if (deltaY > 0) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    //console.log("Event: ", evt);
    $("#test").html(scrollText +
      "<br>clientHeight: " + this.clientHeight +
      "<br>scrollHeight: " + this.scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>deltaY: " + deltaY);
});

- jherax

Answer 6

有一种简单的方法可以做到这一点，而不需要任何全局变量。MouseWheel事件有一个明确指定滚动方向的属性。以下是如何使用它：

   $("#scroll_div").bind("mousewheel",function(ev) {
      var curScrollLeft = $(this).scrollLeft();
      $(this).scrollLeft(curScrollLeft + Math.round(ev.originalEvent.wheelDelta));
    });

- monday

---

我得试一试这个，谢谢！ - Hanna