jQuery를 사용하여 페이지의 스크롤 위치를 탐지하는 방법

jQuery를 사용하여 페이지의 스크롤 위치를 탐지하는 방법

웹사이트의 jQuery 기능에 문제가 있습니다.이게 뭘 하는지는...window.scroll()윈도우가 스크롤 위치를 변경할 때 이를 인식하고 변경 시 서버에서 데이터를 로드하기 위한 몇 가지 함수를 호출합니다.

문제는.scroll()스크롤 위치가 조금만 바뀌어도 바로 호출되어 하단에 데이터를 로드하지만, Facebook 피드처럼 스크롤/페이지 위치가 하단에 도달하면 새로운 데이터를 로드하고 싶습니다.

그런데 jQuery를 사용하여 스크롤 위치를 검출하는 방법을 잘 모르겠습니다.

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

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

jQuery 메서드를 사용하여 스크롤 위치를 추출할 수 있습니다.

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

찾고 있는 것은window.scrollTop()기능.

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

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

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

이것은 스크롤의 가치를 얻는 또 다른 방법입니다.

이제 그게 나한테는 통하네...

$(document).ready(function(){

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

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

})

잘 작동한다...그런 다음 JQuery/TweenMax를 사용하여 요소를 추적하고 제어할 수 있습니다.

PostBack 주변에서 값을 가져오고 스크롤을 추가할 때 HiddenField에 변경 사항으로 스크롤 값을 저장합니다.

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

다음 코드를 사용하여 모든 페이지를 추가할 수 있습니다.

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

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

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

이전 메시지를 로드하기 위한 chat_boxes의 코드입니다.

GET 스크롤 위치:

var scrolled_val = window.displaysY;

DETECT 스크롤 위치:

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

언급URL : https://stackoverflow.com/questions/17441065/how-to-detect-scroll-position-of-page-using-jquery