基于jQuery實(shí)現(xiàn)滾動(dòng)刷新效果
更新時(shí)間：2017年01月09日 09:14:26 作者：Zerone1993
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)滾動(dòng)刷新效果，使用Ajax獲取后臺(tái)數(shù)據(jù)更新前端頁面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
Jquery實(shí)現(xiàn)簡單的滾動(dòng)刷新效果：
實(shí)際情況使用Ajax獲取后臺(tái)數(shù)據(jù)更新前端頁面即可實(shí)現(xiàn)頁面滾動(dòng)刷新效果
HTML正文：
<form id="form1" runat="server"> <div style="height: 3000px; background-color: yellow;"> </div> </form>
Javascript操作代碼：
$(document).ready(function() {
$(window).scroll(function() {
//$(document).scrollTop() 獲取垂直滾動(dòng)的距離:最小值為0，最大值：文檔高度-可視化窗口高度
//$(document).scrollLeft() 這是獲取水平滾動(dòng)條的距離
console.log("垂直滾動(dòng)條位置："+$(document).scrollTop()+"--"+$(window).height());
if ($(document).scrollTop() <= 0) {
console.log("滾動(dòng)條已經(jīng)到達(dá)頂部為0");
}
/**
*$(document).height():文檔的高度
*$(window).height()：可視域的高度：窗口的大?。焊鶕?jù)瀏覽窗口的大小變化
*判斷底部:文檔高度<=滾動(dòng)條垂直高度+可視窗口的高度
* */
if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
console.log("滾動(dòng)條已經(jīng)到達(dá)底部為" + $(document).scrollTop());
}
});
});
效果：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JQuery顯示、隱藏div的幾種方法簡明總結(jié),本文總結(jié)了控制style、控制CSS、JQuery自帶方法等幾種顯示、隱藏div的方法,需要的朋友可以參考下2015-04-04
基于jQuery的網(wǎng)頁右下角彈出廣告(IE7,firefox)
以前曾寫過一個(gè),不過太麻煩了,呵呵```現(xiàn)在改進(jìn)了一下,其實(shí)很簡單:css定位層一直在右下角,用js控制層的高度增減。2010-08-08
jQuery使用正則驗(yàn)證15/18身份證的方法示例
這篇文章主要介紹了jQuery使用正則驗(yàn)證15/18身份證的方法,涉及jQuery基于正則進(jìn)行數(shù)字字符串驗(yàn)證相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
Jquery刷新頁面背景圖片隨機(jī)變換的實(shí)現(xiàn)方法
Jquery刷新頁面背景圖片隨機(jī)變換的實(shí)現(xiàn)方法，需要的朋友可以參考一下2013-03-03
解析prototype,JQuery中跳出each循環(huán)的方法
這篇文章主要介紹了在prototype,JQuery中跳出each循環(huán)的方法。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
Jquery+ajax+JAVA(servlet)實(shí)現(xiàn)下拉菜單異步取值
這篇文章主要介紹了Jquery+ajax+JAVA(servlet)實(shí)現(xiàn)下拉菜單異步取值的相關(guān)資料,需要的朋友可以參考下2016-03-03
傳遞參數(shù)的標(biāo)準(zhǔn)方法(jQuery.ajax)
jQuery.ajax傳遞參數(shù)的方法2008-11-11
在QWrap群里討論時(shí)，有同學(xué)問jquery/yui等已做到極致，我們有沒必要再重復(fù)造一個(gè)叫QWrap的輪子？2011-02-02
jQuery實(shí)現(xiàn)定時(shí)讀取分析xml文件的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)定時(shí)讀取分析xml文件的方法,涉及jquery通過定時(shí)器采用Ajax方法讀取并處理XML文件的相關(guān)技巧,需要的朋友可以參考下2015-07-07
全面解析DOM操作和jQuery實(shí)現(xiàn)選項(xiàng)移動(dòng)操作代碼分享
這篇文章主要介紹了DOM操作和jQuery實(shí)現(xiàn)選項(xiàng)移動(dòng)操作代碼分享的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06