কীভাবে 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

উইন্ডোর স্ক্রল করার ঘটনা সংযুক্ত একটি খারাপ ধারণা: দেখুন stackoverflow.com/questions/5036850/...

— hendr1x

উইন্ডো স্ক্রোল শুনতে এবং এটি নিজের পক্ষে খারাপ নয়। এটা তোলে যখন মানুষ করার চেষ্টা করুন না যে ঘটনা যে কষ্ট ঘটে প্রতিটি অগ্নিসংযোগ উপর জিনিস। যদি আপনি কেবলমাত্র বর্তমান স্ক্রোল অবস্থানে কোনও ভেরিয়েবলের মান সেট করতে বা সত্য / মিথ্যা হিসাবে কিছু করেন এবং তারপরে ইভেন্টের বাইরের লোকদের ব্যবহার করেন তবে আপনার সাধারণত সোনালী হওয়া উচিত।

— জেসি ডুপুয়

এই জাতীয় ইভেন্টের সাথে কাজ করার সময় আপনার ডিবেউসিংয়ের কথা বিবেচনা করা উচিত। দেখুন 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

এখানে ডেমো 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)
 }
});

পূর্ববর্তী বার্তাগুলি লোড করার জন্য চ্যাট_বক্সের জন্য এই কোড

Answer 9

স্ক্রোল অবস্থান পান:

var স্ক্রোলড_ওয়ালাল = উইন্ডো.স্ক্রোলওয়াই;

স্ক্রোল অবস্থান সনাক্ত করুন:

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