私のウェブサイトの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の .scrollTop()
メソッドを使ってスクロール位置を抽出できます。
$(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
}
});
ここでチェックデモ 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');
});
これはscrollの値を取得するもう1つの方法です。
今それは私のために働く...
$(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()'>↑</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ため、このコード