web-dev-qa-db-de.com

So ermitteln Sie die Bildlaufposition der Seite mit jQuery

Ich habe Probleme mit der jQuery-Funktion auf meiner Website. Was es tut, ist, dass es die Funktion window.scroll() verwendet, um zu erkennen, wann das Fenster seine Bildlaufposition ändert und bei der Änderung einige Funktionen zum Laden von Daten vom Server aufruft.

Das Problem ist, dass die Funktion .scroll() aufgerufen wird, sobald sich die Bildlaufposition sogar geringfügig ändert und Daten unten geladen werden. Was ich jedoch erreichen möchte, ist das Laden neuer Daten, wenn die Bildlauf-/Seitenposition unten erreicht wird, wie dies bei Facebook-Feed der Fall ist.

Ich bin mir jedoch nicht sicher, wie ich die Bildlaufposition mit jQuery ermitteln kann.

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

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

Sie können die Bildlaufposition mit der jQuery-Methode .scrollTop() extrahieren

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

Sie suchen nach der Funktion window.scrollTop().

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

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

Überprüfen Sie hier 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');
});

Dies ist ein weiterer Weg, um den Wert von scroll zu erhalten. 

5
safeer008

Das funktioniert jetzt für mich ... 

$(document).ready(function(){

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

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

})

es funktioniert gut ... und dann können Sie mit JQuery/TweenMax Elemente nachverfolgen und steuern.

4
Andaeiii

Speichern Sie den Wert des Bildlaufs als Änderungen in HiddenField, wenn der PostBack-Wert den Wert abruft und den Bildlauf hinzufügt. 

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

Sie können alle Seiten mit diesem Code hinzufügen:

JS-Code:

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

CSS-Code 

/*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)
 }
});

Dieser Code für chat_boxes zum Laden vorheriger Nachrichten

0
RinShan Kolayil