Javascript 如何使用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.scrollTop（）

函数

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

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

在这里查看演示

---

这是获取scroll值的另一种方法

在回发前后检索滚动值并添加滚动时，将滚动值存储为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" />

//jQuery
jQuery（文档）.ready（函数（）{
$（窗口）.scrollTop（$（“#”）val（）；
$（窗口）。滚动（功能（事件）{
$（“#”）val（$（window.scrollTop（））；
});
});
var prm=Sys.WebForms.PageRequestManager.getInstance（）；
prm.add_endRequest（函数（）{
$（窗口）.scrollTop（$（“#”）val（）；
$（窗口）。滚动（功能（事件）{
$（“#”）val（$（window.scrollTop（））；
});
});
//第页Asp.Net

现在这对我来说很有效

$(document).ready(function(){

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

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

})

---

它工作得很好。。。然后您可以使用JQuery/TweenMax跟踪并控制元素。

您可以使用以下代码添加所有页面：

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

---

此代码用于加载以前的消息的聊天室。

获取滚动位置：

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

var scrolled_val=window.scrollY

检测滚动位置：

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

---

将事件附加到窗口滚动是一个坏主意：请看，收听窗口滚动本身并不坏。当人们试图在每次事件发生时做一些事情时，麻烦就发生了。如果只做一个变量，比如将变量的值设置为当前滚动位置，或者true / false，然后使用事件之外的值，则通常应该是金色的。在处理此类事件时，应该考虑去抖动。由于函数中已有

event

作为参数，因此可以从

event.originalEvent.pageY获取相同的数据请绝对避免辱骂和脏话。阅读文章。这回答了你的问题吗？
 /* 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;
}

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

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