基于jQuery實現(xiàn)滾動刷新效果
更新時間：2017年01月09日 09:14:26 作者：Zerone1993
這篇文章主要為大家詳細介紹了基于jQuery實現(xiàn)滾動刷新效果，使用Ajax獲取后臺數(shù)據(jù)更新前端頁面，具有一定的參考價值，感興趣的小伙伴們可以參考一下
Jquery實現(xiàn)簡單的滾動刷新效果：
實際情況使用Ajax獲取后臺數(shù)據(jù)更新前端頁面即可實現(xiàn)頁面滾動刷新效果
HTML正文：
<form id="form1" runat="server"> <div style="height: 3000px; background-color: yellow;"> </div> </form>
Javascript操作代碼：
$(document).ready(function() {
$(window).scroll(function() {
//$(document).scrollTop() 獲取垂直滾動的距離:最小值為0，最大值：文檔高度-可視化窗口高度
//$(document).scrollLeft() 這是獲取水平滾動條的距離
console.log("垂直滾動條位置："+$(document).scrollTop()+"--"+$(window).height());
if ($(document).scrollTop() <= 0) {
console.log("滾動條已經(jīng)到達頂部為0");
}
/**
*$(document).height():文檔的高度
*$(window).height()：可視域的高度：窗口的大?。焊鶕?jù)瀏覽窗口的大小變化
*判斷底部:文檔高度<=滾動條垂直高度+可視窗口的高度
* */
if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
console.log("滾動條已經(jīng)到達底部為" + $(document).scrollTop());
}
});
});
效果：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了jQuery通過deferred對象管理ajax異步的相關(guān)資料,需要的朋友可以參考下2016-05-05
基于jquery實現(xiàn)的上傳圖片及圖片大小驗證、圖片預(yù)覽效果代碼
基于jquery實現(xiàn)的上傳圖片及圖片大小驗證、圖片預(yù)覽效果代碼，需要的朋友可以參考下。2011-04-04
本文主要分享了jQuery編寫網(wǎng)頁版2048小游戲的示例代碼，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要給大家介紹了利用jquery如何禁止外層滾動條的滾動,文中給出了詳細的示例代碼，相信對大家的理解和學(xué)習(xí)具有一定的參考借鑒價值，有需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
這篇文章主要介紹了CSS+jQuery實現(xiàn)簡單的折疊菜單的代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2016-12-12
淺析jquery與checkbox的checked屬性的問題
下面小編就為大家?guī)硪黄獪\析jquery與checkbox的checked屬性的問題。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-04-04
這篇文章主要介紹了jQuery中index()方法用法,實例分析了index()方法返回索引值的幾種常見使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12
使用jQuery,Angular實現(xiàn)登錄界面驗證碼詳解
這篇文章主要介紹了使用jQuery,Angular實現(xiàn)登錄界面驗證碼詳解,需要的朋友可以參考下2017-04-04
jQuery實現(xiàn)表單步驟流程導(dǎo)航代碼分享
這篇文章主要介紹了jQuery實現(xiàn)表單步驟流程導(dǎo)航，代碼實現(xiàn)效果簡單精致，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
flash+jQuery實現(xiàn)可關(guān)閉及重復(fù)播放的壓頂廣告
本文給大家分享的是仿游戲門戶網(wǎng)站可關(guān)閉及重復(fù)播放泰山壓頂廣告是一款基于jquery實現(xiàn)的打開網(wǎng)頁緩慢下拉廣告代碼。有需要的小伙伴可以參考下。2015-04-04