web-dev-qa-db-fra.com

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

J'ai des problèmes avec la fonctionnalité jQuery sur mon site web. Ce qu’il fait, c’est qu’il utilise la fonction window.scroll() pour reconnaître le moment où la fenêtre change de position de défilement et appelle lors de la modification quelques fonctions pour charger des données depuis le serveur.

Le problème est que la fonction .scroll() est appelée dès qu’il ya même un léger changement dans la position de défilement et que les données sont chargées en bas; Cependant, ce que je souhaite, c'est 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 suis pas sûr de savoir 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();
});
javascriptjqueryscroll
146
Maven

Vous pouvez extraire la position de défilement à l’aide de la méthode .scrollTop() de jQuery

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    // Do something
});
264
Konstantin Dinev

Vous recherchez la fonction window.scrollTop().

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

    if(height  > some_number) {
        // do something
    }
});
110
David Freitag

Cliquez 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();
   }
});
33
yeyene
$(window).scroll( function() { 
 var scrolled_val = $(document).scrollTop().valueOf();
 alert(scrolled_val+ ' = scroll value');
});

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

5
safeer008

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.

4
Andaeiii

Stocker la valeur du défilement en tant que modifications dans HiddenField lorsque, autour de 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" />
2
Mauricio Ferraz

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;
}
0
Ferhat KOÇER
$('.div').scroll(function (event) {
 event.preventDefault()
 var scroll = $(this).scrollTop();
 if(scroll == 0){
   alert(123)
 }
});

Ce code pour les chat_boxes pour le chargement des messages précédents

0
RinShan Kolayil