JQuery का उपयोग करके पृष्ठ की स्क्रॉल स्थिति का पता कैसे लगाएं

Question

मुझे अपनी वेबसाइट पर jQuery की कार्यक्षमता से परेशानी हो रही है। यह क्या करता है, यह window.scroll() फ़ंक्शन को पहचानने के लिए उपयोग करता है जब विंडोज़ अपनी स्क्रॉल स्थिति बदलती है और परिवर्तन पर सर्वर से डेटा लोड करने के लिए कुछ फ़ंक्शन कॉल करता है।

समस्या यह है कि .scroll()फ़ंक्शन को कहा जाता है जैसे ही स्क्रॉल स्थिति में थोड़ा बदलाव होता है और नीचे डेटा लोड होता है; हालाँकि, जो मैं प्राप्त करना चाहता हूं वह नए डेटा को लोड करने के लिए है जब स्क्रॉल / पृष्ठ स्थिति नीचे तक पहुंचती है, जैसे कि यह फेसबुक फीड के लिए होता है।

लेकिन मुझे यकीन नहीं है कि jQuery का उपयोग करके स्क्रॉल स्थिति का पता कैसे लगाया जाए?

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

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

Comments

क्या इससे आपके सवाल का जवाब मिलता है? स्क्रॉल दिशा का पता लगाने के लिए कैसे

— आर्यन बीज़ादुर

Answer 1

आप jQuery की .scrollTop()विधि का उपयोग करके स्क्रॉल स्थिति को निकाल सकते हैं

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

Comments

विंडो स्क्रॉल करने के लिए घटनाओं को

— जोड़ना

विंडो स्क्रॉल को सुनना अपने आप में बुरा नहीं है। यह तब होता है जब लोग उस घटना के प्रत्येक फायरिंग पर चीजें करने की कोशिश करते हैं जो परेशानी होती है। यदि आप केवल कुछ ऐसा करते हैं जैसे कि एक चर का मान वर्तमान स्क्रॉल स्थिति में, या सत्य / असत्य पर सेट किया गया है, और फिर घटना के बाहर उन लोगों का उपयोग करें , तो आपको आमतौर पर सुनहरा होना चाहिए।

— जेसी डुप्यू

इस तरह की घटनाओं के साथ काम करते समय आपको बहस करने पर विचार करना चाहिए। देखें davidwalsh.name/javascript-debounce-function

— caroso1222

जैसा कि आप पहले से ही eventतर्क के रूप में कार्य कर रहे हैं, आप से एक ही डेटा प्राप्त कर सकते हैंevent.originalEvent.pageY;

— एंटोनियोसस

Answer 2

आप window.scrollTop()फ़ंक्शन की तलाश कर रहे हैं ।

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

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

Answer 3

यहां देखें 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();
   }
});

Answer 4

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

यह स्क्रॉल का मान प्राप्त करने का एक और तरीका है।

Answer 5

अब वह मेरे लिए काम करता है ...

$(document).ready(function(){

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

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

})

यह अच्छी तरह से काम करता है ... और फिर आप तत्वों को ट्रैक करने और उन्हें नियंत्रित करने के लिए JQuery / TweenMax का उपयोग कर सकते हैं।

Comments

कृपया बिल्कुल गालियों और बुरे शब्दों से बचें। सहायता केंद्र पढ़ें ।

— Kyll

Answer 6

जब पोस्टबैक के आसपास मान पुनः प्राप्त हो जाए और स्क्रॉल को जोड़ा जाए, तो स्क्रॉल के मूल्य को हिडनफील्ड में परिवर्तन के रूप में संग्रहीत करें।

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

Answer 7

आप इस कोड के साथ सभी पृष्ठ जोड़ सकते हैं:

जेएस कोड:

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

सीएसएस कोड

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

Answer 8

$('.div').scroll(function (event) {
 event.preventDefault()
 var scroll = $(this).scrollTop();
 if(scroll == 0){
   alert(123)
 }
});

पिछले संदेशों को लोड करने के लिए chat_boxes के लिए यह कोड

Answer 9

स्क्रॉल स्थिति प्राप्त करें:

var scrolled_val = window.scrollY;

स्क्रॉल स्क्रॉल स्थिति:

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