Comment détecter la position de défilement de la page à l'aide de jQuery

186

J'ai des problèmes avec la fonctionnalité jQuery sur mon site Web. Ce qu'il fait, c'est qu'il utilise la window.scroll() fonction pour reconnaître quand la fenêtre change sa position de défilement et au changement appelle quelques fonctions pour charger les données du serveur.

Le problème est que la .scroll()fonction est appelée dès qu'il y a même un petit changement dans la position de défilement et charge les données en bas; cependant, ce que je souhaite réaliser est de charger de nouvelles données lorsque la position de défilement / page atteint le bas, comme cela se produit pour le flux Facebook.

Mais je ne sais pas comment détecter la position de défilement à l'aide de jQuery?

function getData() {
  $.getJSON('Get/GetData?no=1', function (responseText) {
    //Load some data from the server
  })
};

$(window).scroll(function () {
    getData();
});
Maven
la source
Est-ce que cela répond à votre question? Comment détecter la direction de défilement
Aryan Beezadhur

Réponses:

330

Vous pouvez extraire la position de défilement en utilisant la .scrollTop()méthode de jQuery

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    // Do something
});
Konstantin Dinev
la source
9
Joindre des événements au défilement de la fenêtre est une mauvaise idée: voir stackoverflow.com/questions/5036850
...
13
Écouter le défilement de la fenêtre n'est pas mauvais en soi. C'est lorsque les gens essaient de faire des choses à chaque déclenchement de cet événement que les problèmes surviennent. Si vous ne faites quelque chose comme définir la valeur d'une variable sur la position de défilement actuelle, ou sur vrai / faux, puis utilisez ceux en dehors de l'événement, vous devriez généralement être en or.
Jesse Dupuy
7
Vous devriez envisager de débouncer lorsque vous travaillez avec ce type d'événements. Voir davidwalsh.name/javascript-debounce-function
Carlos Roso
Comme vous l'avez déjà eventen fonction comme argument, vous pouvez obtenir les mêmes données deevent.originalEvent.pageY;
Antoniossss
119

Vous recherchez la window.scrollTop()fonction.

$(window).scroll(function() {
    var height = $(window).scrollTop();

    if(height  > some_number) {
        // do something
    }
});
David Freitag
la source
36

Vérifiez ici DEMO http://jsfiddle.net/yeyene/Uhm2J/

function getData() {
    $.getJSON('Get/GetData?no=1', function (responseText) {
        //Load some data from the server
    })
};

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
       // getData();
   }
});
yeyene
la source
6
$(window).scroll( function() { 
 var scrolled_val = $(document).scrollTop().valueOf();
 alert(scrolled_val+ ' = scroll value');
});

C'est une autre façon d'obtenir la valeur du scroll.

safeer008
la source
4

Maintenant ça marche pour moi ...

$(document).ready(function(){

    $(window).resize(function(e){
        console.log(e);                   
    });

    $(window).scroll(function (event) {
        var sc = $(window).scrollTop();
        console.log(sc);
    });

})

cela fonctionne bien ... et vous pouvez ensuite utiliser JQuery / TweenMax pour suivre les éléments et les contrôler.

Ande Caleb
la source
5
Veuillez absolument éviter les insultes et les mauvais mots. Lisez le centre d'aide .
Kyll
2

Stockez la valeur du défilement en tant que modifications dans HiddenField lorsque le PostBack récupère la valeur et ajoute le défilement.

//jQuery

jQuery(document).ready(function () {

    $(window).scrollTop($("#<%=hidScroll.ClientID %>").val());

    $(window).scroll(function (event) {
        $("#<%=hidScroll.ClientID %>").val($(window).scrollTop());
    });
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function () {

    $(window).scrollTop($("#<%=hidScroll.ClientID %>").val());

    $(window).scroll(function (event) {
        $("#<%=hidScroll.ClientID %>").val($(window).scrollTop());
    });
});

//Page Asp.Net
<asp:HiddenField ID="hidScroll" runat="server" Value="0" />
Mauricio Ferraz
la source
0

Vous pouvez ajouter toutes les pages avec ce code:

Code JS:

 /* Top btn */
    $(window).scroll(function() {
        if ($(this).scrollTop()) {
            $('#toTop').fadeIn();
        } else {
            $('#toTop').fadeOut();
        }
    });
    var top_btn_html="<topbtn id='toTop' onclick='gotoTop()'>&#8593;</topbtn>";
    $('document').ready(function(){
        $("body").append(top_btn_html);
    });
    function gotoTop(){
        $("html, body").animate({scrollTop: 0}, 500);    
    }
    /* Top btn */

CODE CSS

/*Scrool top btn*/
#toTop{
    position: fixed;
    z-index: 10000;
    opacity: 0.5;
    right: 5px;
    bottom: 10px;
    background-color: #ccc;
    border: 1px solid black;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    color: black;
    font-size: 22px;
    font-weight: bolder;
    text-align: center;
    vertical-align: middle;
}
Ferhat KOÇER
la source
0
$('.div').scroll(function (event) {
 event.preventDefault()
 var scroll = $(this).scrollTop();
 if(scroll == 0){
   alert(123)
 }
});

Ce code pour chat_boxes pour charger les messages précédents

RinShan Kolayil
la source
0

GET Scroll Position:

var scrolled_val = window.scrollY;

DÉTECTER la position de défilement:

$(window).scroll
(
     function (event) 
     {
          var scrolled_val = window.scrollY;
          alert(scrolled_val);
     }
 );
Hassaan Raza
la source