jQuery 如何使用jQuery检测页面的滚动位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17441065/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect scroll position of page using jQuery
提问by Maven
I am having trouble with jQuery functionality on my website. What it does, is that it uses the window.scroll()function to recognize when the windows changes its scroll position and at the change calls a few functions to load data from the server.
我的网站上的 jQuery 功能有问题。它的作用是使用该window.scroll()函数来识别窗口何时更改其滚动位置，并在更改时调用一些函数以从服务器加载数据。
The problem is the .scroll()function is called as soon as there is even a little change in the scroll position and loads data at the bottom; however, what I wish to achieve is to load new data when the scroll/page position reaches at the bottom, like it happens for Facebook feed.
问题是.scroll()只要滚动位置稍有变化就会调用该函数并在底部加载数据；但是，我希望实现的是在滚动/页面位置到达底部时加载新数据，就像 Facebook 提要一样。
But I am not sure how to detect scroll position using jQuery?
但我不确定如何使用 jQuery 检测滚动位置？
function getData() {
$.getJSON('Get/GetData?no=1', function (responseText) {
//Load some data from the server
})
};
$(window).scroll(function () {
getData();
});
回答by Konstantin Dinev
You can extract the scroll position using jQuery's .scrollTop()method
您可以使用 jQuery 的.scrollTop()方法提取滚动位置
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
// Do something
});
回答by David Freitag
You are looking for the window.scrollTop()function.
您正在寻找该window.scrollTop()功能。
$(window).scroll(function() {
var height = $(window).scrollTop();
if(height > some_number) {
// do something
}
});
回答by yeyene
Check here DEMO http://jsfiddle.net/yeyene/Uhm2J/
在这里查看演示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();
}
});
回答by safeer008
$(window).scroll( function() {
var scrolled_val = $(document).scrollTop().valueOf();
alert(scrolled_val+ ' = scroll value');
});
This is another way of getting the value of scroll.
这是获取滚动值的另一种方法。
回答by Ande Caleb
Now that works for me...
现在这对我有用...
$(document).ready(function(){
$(window).resize(function(e){
console.log(e);
});
$(window).scroll(function (event) {
var sc = $(window).scrollTop();
console.log(sc);
});
})
it works well... and then you can use JQuery/TweenMax to track elements and control them.
它运行良好……然后您可以使用 JQuery/TweenMax 来跟踪元素并控制它们。
回答by Mauricio Ferraz
Store the value of the scroll as changes in HiddenField when around the PostBack retrieves the value and adds the scroll.
当 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" />
回答by Ferhat KO?ER
You can add all pages with this code:
您可以使用以下代码添加所有页面：
JS code:
JS代码：
/* Top btn */
$(window).scroll(function() {
if ($(this).scrollTop()) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
var top_btn_html="<topbtn id='toTop' onclick='gotoTop()'>↑</topbtn>";
$('document').ready(function(){
$("body").append(top_btn_html);
});
function gotoTop(){
$("html, body").animate({scrollTop: 0}, 500);
}
/* Top btn */
CSS CODE
代码
/*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;
}
回答by RinShan Kolayil
$('.div').scroll(function (event) {
event.preventDefault()
var scroll = $(this).scrollTop();
if(scroll == 0){
alert(123)
}
});
This code for chat_boxes for loading previous messages
此代码用于 chat_boxes 用于加载以前的消息
回答by Hassaan Raza
GET Scroll Position:
获取滚动位置：
var scrolled_val = window.scrollY;
var scrolled_val = window.scrollY;
DETECT Scroll Position:
检测滚动位置：
$(window).scroll
(
function (event)
{
var scrolled_val = window.scrollY;
alert(scrolled_val);
}
);
