Come rilevare la posizione di scorrimento della pagina usando jQuery


183

Sto riscontrando problemi con la funzionalità jQuery sul mio sito Web. Quello che fa è che utilizza la window.scroll() funzione per riconoscere quando Windows cambia la sua posizione di scorrimento e al cambio chiama alcune funzioni per caricare i dati dal server.

Il problema è che la .scroll()funzione viene chiamata non appena c'è anche un piccolo cambiamento nella posizione di scorrimento e carica i dati in basso; tuttavia, ciò che desidero ottenere è caricare nuovi dati quando la posizione di scorrimento / pagina raggiunge il fondo, come accade per il feed di Facebook.

Ma non sono sicuro di come rilevare la posizione di scorrimento usando jQuery?

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

$(window).scroll(function () {
    getData();
});

Risposte:


322

È possibile estrarre la posizione di scorrimento utilizzando il .scrollTop()metodo di jQuery

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

9
Collegamento eventi per la finestra di scorrimento è una cattiva idea: vedi stackoverflow.com/questions/5036850/...
hendr1x

13
Ascoltare lo scroll della finestra non è male in sé e per sé. È quando le persone cercano di fare cose su ogni lancio di quell'evento che si verificano problemi. Se fai solo qualcosa come impostare il valore di una variabile sulla posizione di scorrimento corrente, o su vero / falso, e poi fai uso di quelli al di fuori dell'evento, dovresti essere generalmente d'oro.
Jesse Dupuy,

7
Dovresti considerare di rimandare quando lavori con questo tipo di eventi. Vedi davidwalsh.name/javascript-debounce-function
caroso1222

Dato che hai già una eventfunzione come argomento, puoi ottenere gli stessi dati daevent.originalEvent.pageY;
Antoniossss,

119

Stai cercando la window.scrollTop()funzione.

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

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

36

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

6
$(window).scroll( function() { 
 var scrolled_val = $(document).scrollTop().valueOf();
 alert(scrolled_val+ ' = scroll value');
});

Questo è un altro modo per ottenere il valore di scroll.


4

Ora funziona per me ...

$(document).ready(function(){

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

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

})

funziona bene ... e quindi puoi usare JQuery / TweenMax per tenere traccia degli elementi e controllarli.


5
Per favore, evita assolutamente insulti e parolacce. Leggi il centro assistenza .
Kyll,

2

Memorizza il valore dello scroll come modifiche in HiddenField quando PostBack recupera il valore e aggiunge lo scroll.

//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" />

0

Puoi aggiungere tutte le pagine con questo codice:

Codice 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 */

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

Questo codice per chat_box per il caricamento di messaggi precedenti


0

OTTIENI Posizione di scorrimento:

var scrolled_val = window.scrollY;

RILEVARE Posizione di scorrimento:

$(window).scroll
(
     function (event) 
     {
          var scrolled_val = window.scrollY;
          alert(scrolled_val);
     }
 );
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.