基于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ù)更新前端頁(yè)面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Jquery實(shí)現(xiàn)簡(jiǎn)單的滾動(dòng)刷新效果：

實(shí)際情況使用Ajax獲取后臺(tái)數(shù)據(jù)更新前端頁(yè)面即可實(shí)現(xiàn)頁(yè)面滾動(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());
  }
});
 });

效果：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JQuery顯示、隱藏div的幾種方法簡(jiǎn)明總結(jié)
這篇文章主要介紹了JQuery顯示、隱藏div的幾種方法簡(jiǎn)明總結(jié),本文總結(jié)了控制style、控制CSS、JQuery自帶方法等幾種顯示、隱藏div的方法,需要的朋友可以參考下
2015-04-04
基于jQuery的網(wǎng)頁(yè)右下角彈出廣告(IE7,firefox)
以前曾寫過(guò)一個(gè),不過(guò)太麻煩了,呵呵```現(xiàn)在改進(jìn)了一下,其實(shí)很簡(jiǎn)單: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刷新頁(yè)面背景圖片隨機(jī)變換的實(shí)現(xiàn)方法
Jquery刷新頁(yè)面背景圖片隨機(jī)變換的實(shí)現(xiàn)方法，需要的朋友可以參考一下
2013-03-03
解析prototype,JQuery中跳出each循環(huán)的方法
這篇文章主要介紹了在prototype,JQuery中跳出each循環(huán)的方法。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
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
Jquery之美中不足小結(jié)
在QWrap群里討論時(shí)，有同學(xué)問(wèn)jquery/yui等已做到極致，我們有沒(méi)必要再重復(fù)造一個(gè)叫QWrap的輪子？
2011-02-02
jQuery實(shí)現(xiàn)定時(shí)讀取分析xml文件的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)定時(shí)讀取分析xml文件的方法,涉及jquery通過(guò)定時(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