Jquery infinite scroll - avec des div, pas de barre de défilement du corps

Supposons que j'ai div et je veux récupérer les données et envoyer des données en div. Lorsque l'utilisateur fait défiler à l'intérieur de la div, le prochain jeu de données seront récupérées et poussé dans la div. Comment puis-je détecter la position de la barre de défilement avec jQuery? Je ne veux pas utiliser n'importe quel plugin. J'ai besoin de jQuery. Voici un exemple de lien comme ahttp://www.stevefenton.co.uk/cmsfiles/assets/File/infinitescroller.html mais il a utilisé un plugin.

OriginalL'auteur Thomas | 2012-04-09

  1. 39

    Comment à propos de quelque chose le long des lignes de:

    $(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       var new_div = '<div class="new_block"></div>';
       $('.main_content').append(new_div.load('/path/to/script.php'));
   }
});

    Cela ajoute un nouvel élément à la page principale du conteneur lorsque la barre de défilement atteint le bas de la page. Elle remplit également ce nouvel élément avec un contenu chargé à partir d'un script externe.

    Si vous voulez détecter si un utilisateur dispose d'un défilement vers le bas un spécifique div:

    $('.some_element').bind('scroll', function(){
   if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight){
      var new_div = '<div class="new_block"></div>';
      $('.main_content').append(new_div.load('/path/to/script.php'));
   }
});
    pourquoi u écrire cette ligne comme $(this)[0].scrollHeight pourquoi pas $(this).scrollHeight. pourquoi u écrire ici comme tableau. suivre les mentionner. merci
    que la grille de notation utilisée ici pour accéder au zéro de la propriété de l'objet jQuery $(this). jQuery objets sont semblable au tableau de sorte que vous pouvez compter sur la première propriété d'être cohérent. Dans ce cas, c'est une référence à l'arbre DOM enveloppé par l'objet jQuery. C'est un moyen rapide de sténographie.
    Presque parfait! 😉 J'ai une petite modification pour que le deuxième bloc. Un div avec overflow-y:auto, la logique suivante a fonctionné pour moi: $(this).scrollTop() === ($(this)[0].scrollHeight - $(this).innerHeight()).
    Mieux chercher sur 75% de défilement de Mathématiques.round($(this).scrollTop() + $(this).innerHeight()) == $(this)[0].scrollHeight

    OriginalL'auteur hohner

  2. 2

    Ce code a été testé et vérifié que le travail. Lorsque vous faites défiler votre div, le code vérifie si la barre de défilement, atteint vers le bas par la comparaison de la molette de hauteur contre la roue de la position. Si oui, il fait appel à une méthode qui devient de plus en plus de contenu et l'ajouter à la div.

    Profitez-en!

    Coby

    $(document).ready(function () {
        $("div").scroll(function () {
            var $this = $(this);
            var height = this.scrollHeight - $this.height(); //Get the height of the div
            var scroll = $this.scrollTop(); //Get the vertical scroll position

            var isScrolledToEnd = (scroll >= height);

            $(".scroll-pos").text(scroll);
            $(".scroll-height").text(height);

            if (isScrolledToEnd) {
                var additionalContent = GetMoreContent(); //Get the additional content

                $this.append(additionalContent); //Append the additional content

            }
        });
    });

    Par votre commentaire, voici la page HTML le code source qui fonctionne (testé sous IE 9):

    ** S'il vous plaît assurez-vous que vous faites référence à la bibliothèque de jquery **

            <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Image</title>
        <script src="assets/js/jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("div").scroll(function () {
                    var $this = $(this);
                    var height = this.scrollHeight - $this.height(); //Get the height of the div
                    var scroll = $this.scrollTop(); //Get the vertical scroll position

                    var isScrolledToEnd = (scroll >= height);

                    $(".scroll-pos").text(scroll);
                    $(".scroll-height").text(height);

                    if (isScrolledToEnd) {
                        var additionalContent = GetMoreContent(); //Get the additional content

                        $this.append(additionalContent); //Append the additional content

                    }
                });
            });

            function GetMoreContent() {
                return "<p>This is the div content</p><p>This is the div content</p><p>This is the div content</p><p>This is the div content</p><p>This is the div content</p>";
            }
        </script>
    </head>
        <body>
            <div style="overflow: scroll;height: 150px; border: 1px solid red;">
                <p>This is the div content</p>
                <p>This is the div content</p>
                <p>This is the div content</p>
                <p>This is the div content</p>
                <p>This is the div content</p>
                <p>This is the div content</p>
            </div> 

            Scroll Height: <span class="scroll-height"></span>   <br/>
            Scroll position: <span class="scroll-pos"></span>   
        </body>
    </html>

    OriginalL'auteur Koby Mizrahy

  3. 0

    Je pense que .scrollTop() est l'arme de votre choix. jQuery API

    Obtenir la position verticale actuelle de la barre de défilement pour la première
    élément dans l'ensemble des éléments qui correspondent.

    Alors assurez-vous de le lier à la droite de l'élément. Directement sur la div devrait fonctionner je pense.

    La position de défilement verticale est le même que le nombre de pixels
    sont cachés de la vue au-dessus de la zone déroulante. Si la barre de défilement est
    tout en haut, ou si l'élément n'est pas à défilement, ce nombre va
    0.

    Donc, vous avez sans doute trouver un moyen de calculer la hauteur de la div comme si elle allait être étiré sans barre de défilement pour mettre ces nombres dans une relation significative à tirer de la mise en charge de l'événement.

    OriginalL'auteur yoshi