So erkennen Sie die Bildlaufposition einer Seite mit jQuery

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

Das Problem ist, dass die .scroll()Funktion aufgerufen wird, sobald sich die Bildlaufposition geringfügig ändert und die Daten unten geladen werden. Ich möchte jedoch neue Daten laden, wenn die Bildlauf- / Seitenposition unten erreicht ist, wie dies bei Facebook-Feeds der Fall ist.

Aber ich bin nicht sicher, wie ich die Bildlaufposition mit jQuery erkennen kann?

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

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

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

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

Sie suchen die window.scrollTop()Funktion.

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

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

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

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

Dies ist eine weitere Möglichkeit, den Wert von scroll zu ermitteln.

Das funktioniert bei mir ...

$(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 JQuery / TweenMax verwenden, um Elemente zu verfolgen und zu steuern.

Speichern Sie den Wert des Bildlaufs als Änderung in HiddenField, wenn Sie im PostBack den Wert abrufen und den Bildlauf hinzufügen.

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

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;
}

$('.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

GET Scroll Position:

var scrolled_val = window.scrollY;

DETECT Scroll Position:

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