199

我在我的网站上遇到了 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();
});
4

9 回答 9

362

.scrollTop()您可以使用jQuery的方法提取滚动位置

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    // Do something
});
于 2013-07-03T06:28:46.940 回答
121

您正在寻找该window.scrollTop()功能。

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

    if(height  > some_number) {
        // do something
    }
});
于 2013-07-03T06:39:18.313 回答
37

在这里查看演示http://jsfiddle.net/yyene/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();
   }
});
于 2013-07-03T07:03:35.450 回答
6 
$(window).scroll( function() { 
 var scrolled_val = $(document).scrollTop().valueOf();
 alert(scrolled_val+ ' = scroll value');
});

这是获取滚动值的另一种方式。

于 2014-01-07T05:18:07.383 回答
4

现在这对我有用......

$(document).ready(function(){

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

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

})

它运行良好......然后您可以使用 JQuery/TweenMax 来跟踪元素并控制它们。

于 2015-07-28T12:20:10.023 回答
2

当围绕 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" />
于 2015-04-14T18:53:29.090 回答
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;
}
于 2018-04-16T15:03:59.957 回答
0 
$('.div').scroll(function (event) {
 event.preventDefault()
 var scroll = $(this).scrollTop();
 if(scroll == 0){
   alert(123)
 }
});

用于加载以前消息的 chat_boxes 代码

于 2019-06-11T11:13:15.807 回答
0

获取滚动位置：

var scrolled_val = window.scrollY;

检测滚动位置：

$(window).scroll
(
     function (event) 
     {
          var scrolled_val = window.scrollY;
          alert(scrolled_val);
     }
 );
于 2019-10-24T04:29:28.287 回答