How to use jquery to determine the scroll bar scrolling direction example code analysis-JS Tutorial-php.cn

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

伊谢尔伦

Release： 2017-07-19 15:46:12

Original

2069 people have browsed it

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

Copy after login

Calling method:

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

Copy after login

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(&#39;up&#39;);
      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);
}

Copy after login

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

Copy after login

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("我到头部了")；

      }
 }

Copy after login

Calling method:

$(window).scroll(BottomJumpPage);

Copy after login

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("滚动条到底部了");
     });
});

Copy after login

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 = $(&#39;p&#39;), 
　　scrollTo = $(&#39;#row_8&#39;);

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

Copy after login

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!