So verwenden Sie JQuery, um die Bildlaufrichtung der Bildlaufleiste zu bestimmen. Beispielcode-Analyse

Einfach die Richtung der Bildlaufleiste bestimmen

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

Aufrufmethode:

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

Die obige Methode führt dazu, dass das Apple-Browserereignis des Mobiltelefons springt, Lösung und Code verbessert werden

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

Aufrufmethode :

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

Die Bildlaufleiste scrollt nach unten und der Kopf wird beurteilt

Tatsächlich gibt es bereits Urteile in der obigen Funktion, listen wir sie unten noch einmal auf! Schauen Sie sich die folgende Funktion an!

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

      }
 }

Aufrufmethode:

$(window).scroll(BottomJumpPage);

Bestimmen Sie, ob p gescrollt wurde bis zum Ende Teil

Die obige Methode besteht darin, festzustellen, ob die Bildlaufachse nach unten gescrollt wurde, aber manchmal, wenn wir das Bildlaufladen durchführen, müssen wir manchmal auch feststellen, ob ein bestimmtes p vorhanden ist nach unten gescrollt und dann geladen. Wie kann man also beurteilen, ob die Bildlaufachse von p nach unten gescrollt wurde?

Dazu müssen Sie auch ein paar Höhen kennen:

1. Die Höhe von p$("#a bestimmte p").height();
Die Höhe der Scroll-Achse$(# Ein bestimmtes p)[0].scrollHeight
3. Die Höhe von der Scroll-Achse bis zum oberen Ende von p $(ein bestimmtes p)[0].scrollTop;
Schreiben Sie den Code wie folgt:

 $(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: Positionssteuerung der jQuery-Bildlaufleiste:

Scrollen Sie die Bildlaufleiste von p an die Position seiner untergeordneten Elemente, um die automatische Positionierung zu erleichtern.

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

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JQuery, um die Bildlaufrichtung der Bildlaufleiste zu bestimmen. Beispielcode-Analyse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!