How to use jquery to determine the scroll bar scrolling direction example code analysis

Simply determine the direction of the scroll bar

function scroll( fn ) {
  var beforeScrollTop = document.body.scrollTop,
    fn = fn || function() {};
  window.addEventListener("scroll", function() {
    var afterScrollTop = document.body.scrollTop,
      delta = afterScrollTop - beforeScrollTop;
    if( delta === 0 ) return false;
    fn( delta > 0 ? "down" : "up" );
    beforeScrollTop = afterScrollTop;
  }, false);
}

Calling method:

scroll(function(direction) { console.log(direction) });

The above method will cause mobile phone Apple browser events to jump, solutions and code improvements

##

scrollDirect: function (fn) {
  var beforeScrollTop = document.body.scrollTop;
  fn = fn || function () {
  };
  window.addEventListener("scroll", function (event) {
    event = event || window.event;

    var afterScrollTop = document.body.scrollTop;
    delta = afterScrollTop - beforeScrollTop;
    beforeScrollTop = afterScrollTop;

    var scrollTop = $(this).scrollTop();
    var scrollHeight = $(document).height();
    var windowHeight = $(this).height();
    if (scrollTop + windowHeight > scrollHeight - 10) { //滚动到底部执行事件
      fn('up');
      return;
    }
    if (afterScrollTop < 10 || afterScrollTop > $(document.body).height - 10) {
      fn(&#39;up&#39;);
    } else {
      if (Math.abs(delta) < 10) {
        return false;
      }
      fn(delta > 0 ? "down" : "up");
    }
  }, false);
}

Calling method:

  var upflag=1;
  var downflag= 1;
  //scroll滑动,上滑和下滑只执行一次！
scrollDirect(function (direction) {
    if (direction == "down") {
      if (downflag) {
        $(".footer_wrap").slideUp(200);
        downflag = 0;
        upflag = 1;
      }
    }
    if (direction == "up") {
      if (upflag) {
        $(".footer_wrap").slideDown(200);
        downflag = 1;
        upflag = 0;
      }
    }
 });

Scroll bar scrolls to the bottom and head judgment

In fact, there are already judgments in the above function, let’s list them again below! Look at the following function!

BottomJumpPage: function () {
      var scrollTop = $(this).scrollTop();
      var scrollHeight = $(document).height();
      var windowHeight = $(this).height();
      if (scrollTop + windowHeight == scrollHeight) { //滚动到底部执行事件
          console.dir("我到底部了")；

      }
      if (scrollTop == 0) { //滚动到头部部执行事件
      console.dir("我到头部了")；

      }
 }

Calling method:

$(window).scroll(BottomJumpPage);

Determine whether p scrolls to the bottom

The above method is to determine whether the scroll axis has scrolled to the bottom, but sometimes, when we are doing scroll loading, sometimes we also need to check whether a certain p has scrolled to the bottom and then loaded. So how to judge that the scroll axis of p has scrolled to the bottom?

You also need to know several heights:

1. The height of p$("#a certain p").height();

2. The height of the scroll axis$(# A certain p)[0].scrollHeight
3. The height from the scroll axis to the top of p$(a certain p)[0].scrollTop;
Write the code as follows:

 $(document).ready(function (){
    var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
    var nScrollTop = 0;  //滚动到的当前位置
    var npHight = $("#p1").height();
    $("#p1").scroll(function(){
     nScrollHight = $(this)[0].scrollHeight;
     nScrollTop = $(this)[0].scrollTop;
     if(nScrollTop + npHight >= nScrollHight)
      alert("滚动条到底部了");
     });
});

PS: jQuery scroll bar position control:

Scroll the scroll bar of p to the position of its child elements to facilitate automatic positioning.

　　var container = $('p'), 
　　scrollTo = $('#row_8');

　　container.scrollTop( 
　　scrollTo.offset().top - container.offset().top + container.scrollTop() 
　　);

　　// Or you can animate the scrolling: 
　　container.animate({ 
　　scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop() 
　　});?

The above is the detailed content of How to use jquery to determine the scroll bar scrolling direction example code analysis. For more information, please follow other related articles on the PHP Chinese website!