JQuery Detect-Bildlauf unten

  • Ich möchte, dass der Inhalt geladen wird, wenn der Benutzer zum Seitenende blättert.

    Ich habe ein Problem. Es funktioniert gut auf Desktop-Browsern, aber nicht auf mobilen Geräten. Ich habe einen Dirty-Fix ​​implementiert, damit er auf dem iPhone funktioniert. Dies ist jedoch nicht optimal, da er auf Mobilgeräten anderer Größe nicht funktioniert.

    Meine Website ist www.cristianrgreco. com, scrollen Sie nach unten, um den Effekt in Aktion zu sehen.

    Das Problem besteht darin, dass der Bildlauf hinzugefügt wird und die Höhe auf mobilen Geräten nicht der Höhe entspricht, während dies bei Desktop-Browsern der Fall ist.

    Gibt es eine Möglichkeit, mobile Browser zu erkennen?

    Vielen Dank im Voraus.

    Nachfolgend finden Sie den aktuell verwendeten Code:

     $(document).ready(function () {
            $(".main").hide().filter(":lt(3)").show();
            if ($(document).height() == $(window).height()) {
                // Populate screen with content
            }
            else if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
                window.onscroll = function () {
                    if ($(document).height() - $(window).scrollTop() <= 1278) {
                        // At the moment only works on iPhone
                    }
                }
            }
            else {
                $(window).scroll(function () {
                    if ($(window).scrollTop() + $(window).height() >= $(document).height()) {                     
                        // Works perfect for desktop browsers
                    }
                })
            }
    })
     
    22 November 2011
    Cristian
9 answers
  • Für alle, die später hier suchen, habe ich das Problem gelöst, indem Sie dem Viewport-Tag meta height=device-height hinzugefügt haben:

     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
     

    Sie können dann weiterhin $(document).scroll(function(){});

    verwenden. Dies funktionierte mit iOS 5

    20 January 2013
    compid
  • Wenn Sie können, sollten Sie unbedingt versuchen, eine exakte Zahl zu treffen.

    Wenn Sie die Stelok-Funktion verwenden, können Sie wie folgt testen:

     if ($win.height() + $win.scrollTop() > (getDocumentHeight()-10)) {
     

    Es ist etwas weicher - der Benutzer ist möglicherweise nicht ganz zum letzten Pixel gerollt, meint jedoch, er / sie sei unten.

    10 May 2012
    Enigma Plus
  • Eine verbesserte jQuery-Version des Codes

     var scrollRefresh = {
        pastTop: false,
        pastBottom: false,
        previous: 0,
        bottom: function(callback) {
          var pBottom = $(window).height() + $(window).scrollTop() >= $(document).height();
          if(!this.pastBottom && pBottom) {
            callback($(window).height() + $(window).scrollTop());
            this.pastBottom = true;
          } else {
            if(!pBottom) this.pastBottom = false;
          }
          this.previous = $(window).scrollTop();
        },
        top: function(callback) {
          var pTop = $(window).scrollTop() < this.scrollPrevious && $(window).scrollTop <= 0;
          if(!this.pastTop && pTop) {
            callback($(window).scrollTop());
            this.pastTop = true;
          } else {
            if(!pTop) this.pastTop = false;
          }
          this.previous = $(window).scrollTop();
        }
      }
    
      $(window).scroll(function() {
        scrollRefresh.top(function(pos) {
          console.log("Loading top. " + pos);
          alert("scrolled to top"); //You should delete this line
        });
        scrollRefresh.bottom(function(pos) {
          console.log("Loading bottom. " + pos);
          alert("scrolled to bottom"); //You should delete this line
        });
      });
     
    22 June 2012
    GillesBetty
  • Unter Verwendung von jquery und Streloks getDocumentHeight() unten (Prost!) fand ich Folgendes gut. Das Testen auf Gleichheit hat für mich nicht funktioniert, da das iPhone nur einen Bildlaufwert am Ende der Folie registriert hat, der tatsächlich größer als die Dokumenthöhe war:

     $(window).scroll(function () {
      var docHeight = getDocumentHeight();         
      if ($(window).scrollTop() + $(window).height() >= docHeight) {
        // Do stuff
      }
    });
     
    18 June 2013
    bloke_zero
  • Kugelsichere Methode zum Abrufen der Dokumenthöhe in allen Browsern:

     function getDocumentHeight() {
        return Math.max(
            Math.max(document.body.scrollHeight, document.documentElement.scrollHeight),
            Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
            Math.max(document.body.clientHeight, document.documentElement.clientHeight)
        );
    }
     
    22 November 2011
    Strelok
  • Sie können auch ein endloses Scroll-Plugin verwenden: https://github.com/ fredwu / jquery-endlos-scroll https://github.com/paulirish/infinite-scroll

    Ich verwende die endlose Scroll-Funktion und sie funktioniert großartig auf meinem Laptop und iPhone

    17 April 2012
    tim peterson
  • Hier ist eine Zusammenfassung der anderen Antworten, die für mich sehr gut funktioniert. Es könnte als jQuery-Plugin geschrieben werden.

     // Handles scrolling past the window up or down to refresh or load more data.
    var scrolledPastTop = false;
    var scrolledPastBottom = false;
    var scrollPrevious = 0;
    
    function getDocumentHeight() {
      return Math.max(
          Math.max(document.body.scrollHeight, document.documentElement.scrollHeight),
          Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
          Math.max(document.body.clientHeight, document.documentElement.clientHeight)
      );
    }
    
    function bottomScrollRefresh(callback) {
      var pastBottom = $window.height() + $window.scrollTop() > getDocumentHeight();
      if(!scrolledPastBottom && pastBottom) {
        callback($window.height() + $window.scrollTop());
        scrolledPastBottom = true;
      } else {
        if(!pastBottom) scrolledPastBottom = false;
      }
      scrollPrevious = $window.scrollTop();
    }
    
    function topScrollRefresh(callback) {
      var pastTop = $window.scrollTop() < scrollPrevious && $window.scrollTop() <= 0;
      if(!scrolledPastTop && pastTop) {
        callback($window.scrollTop());
        scrolledPastTop = true;
      } else {
        if(!pastTop) scrolledPastTop = false;
      }
      scrollPrevious = $window.scrollTop();
    }
     

    Um dies in Ihrem Code zu verwenden, fügen Sie so etwas hinzu :

     window.onscroll = function() {
      topScrollRefresh(function(pos) {
          console.log("Loading top. " + pos);
      });
      bottomScrollRefresh(function(pos) {
        console.log("Loading bottom. " + pos);
      });
    };
     

    Funktioniert hervorragend für meine PhoneGap / Cordova-App.

    11 May 2012
    Jamon Holmgren
  • Haben Sie das Meta-Tag für IPhone hinzugefügt, mit dem die Inhaltsgröße im Ansichtsfenster des Telefons festgelegt wird?

     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
     

    BEARBEITEN:

    Also habe ich es auf meinem Handy (Android, Lebkuchen) versucht, und das Problem war nicht so sehr, dass der Code nicht funktionierte. Es war der angezeigte Inhalt zwingen Sie die Seite nicht zum Blättern. Sobald ich hineingezoomt und nach unten gescrollt habe, wird der Inhalt dynamisch geladen. Sie können versuchen, Inhalt hinzuzufügen, bis der hinzugefügte Inhalt größer als $ (window) .height ();

    ist
    22 November 2011
    Keith.Abramo
  • Obwohl die Frage vor fünf Jahren gestellt wurde, ist sie im heutigen UI / UX-Kontext mehr als relevant. Und ich möchte meine zwei Cents hinzufügen.

     var element = document.getElementById('flux');
    if (element.scrollHeight - element.scrollTop === element.clientHeight)
    {
        // element is at the end of its scroll, load more content
    }
     

    Quelle: https://developer.mozilla.org/en-US/docs/Web/API/Element / scrollHeight # Determine_if_an_element_has_been_totally_scrolled

    01 February 2017
    Thinking