快捷導(dǎo)航

JS簡單實(shí)現(xiàn)滑動加載數(shù)據(jù)的方法示例

更新時(shí)間：2017年10月18日 10:53:02 作者：HazeOver

這篇文章主要介紹了JS簡單實(shí)現(xiàn)滑動加載數(shù)據(jù)的方法,涉及javascript事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS簡單實(shí)現(xiàn)滑動加載數(shù)據(jù)的方法。分享給大家供大家參考，具體如下：

//滑動
function getScrollTop()
{
 var scrollTop = 0;
 if (document.documentElement && document.documentElement.scrollTop) {
   scrollTop = document.documentElement.scrollTop;
  }else if (document.body) {
  scrollTop = document.body.scrollTop;
  }
  return scrollTop;
}
//獲取當(dāng)前可視范圍的高度
function getClientHeight()
{
 var clientHeight = 0;
 if (document.body.clientHeight && document.documentElement.clientHeight) {
   clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
 }else {
   clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
 }
   return clientHeight;
}
//獲取文檔完整的高度
function getScrollHeight()
{
   return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}
//綁定事件
window.onscroll = function ()
{
 if (getScrollTop() + getClientHeight() == getScrollHeight()) {
  //dosomething
 }
}

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

分享JavaScript監(jiān)聽全部Ajax請求事件的方法
最近在做一個(gè)小項(xiàng)目，引入了第三方j(luò)s文件，這個(gè)文件會調(diào)用XMLHttpRequest向服務(wù)器發(fā)送 Ajax請求，但是我有需要監(jiān)聽其Ajax請求的某些事件，以便額外地執(zhí)行其他腳本。于是稍微看了看監(jiān)聽 Ajax請求的事件方法，在這里分享給大家。有需要的朋友們可以參考借鑒。
2016-08-08
一文了解ES5和ES6的區(qū)別
ES6是JavaScript語言的主要增強(qiáng),允許我們編寫程序,ES6適用于復(fù)雜的應(yīng)用程序,盡管ES5和ES6在本質(zhì)上有一些相似之處,但它們之間也有許多不同之處,下面這篇文章主要給大家介紹了關(guān)于ES5和ES6區(qū)別的相關(guān)資料,需要的朋友可以參考下
2023-05-05
淺談JavaScript中的string擁有方法的原因
這篇文章主要介紹了淺談JavaScript中的string擁有方法的原因,需要的朋友可以參考下
2015-08-08
javascript匿名函數(shù)應(yīng)用示例介紹
匿名函數(shù)，顧名思義就是沒有名字，下面有個(gè)不錯(cuò)的示例，大家可以學(xué)習(xí)下
2014-03-03
javascript 讀取XML數(shù)據(jù)，在頁面中展現(xiàn)、編輯、保存的實(shí)現(xiàn)
最近需要做這樣一個(gè)需求，數(shù)據(jù)保存在XML里，在頁面上通過表格顯示其內(nèi)容，可以修改內(nèi)容，再保存到XML。下面把做這個(gè)東西的過程記錄下來，做個(gè)筆記，也給需要的人一些幫助。
2009-10-10
js opener的使用詳解
在JS中，window.opener只是對彈出窗口的母窗口的一個(gè)引用。本篇文章主要是對js中opener的使用進(jìn)行了詳細(xì)介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01
JavaScript Event事件學(xué)習(xí)第一章 Event介紹
Events是每一個(gè)JavaScript程序核心。什么是事件處理，它有什么問題和怎樣寫出跨瀏覽器的代碼，我將在這一章做一個(gè)概述。我也會提供一些有精彩的關(guān)于事件處理程序的細(xì)節(jié)的文章。
2010-02-02
詳解webpack2異步加載套路
這篇文章主要介紹了詳解webpack2異步加載套路,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
圖文詳解JavaScript的原型對象及原型鏈
許多人對JavaScript的原型及原型鏈仍感到困惑，網(wǎng)上的文章又大多長篇大論，令讀者不明覺厲。下面小編將用最簡潔明了的圖文介紹JavaScript的原型及原型鏈。
2016-08-08
js數(shù)組的基本操作(很全自己整理的)
這段時(shí)間做的一個(gè)項(xiàng)目，用到數(shù)組的地方很多，學(xué)了才知道js數(shù)組的功能強(qiáng)大很，遠(yuǎn)比VB,C#強(qiáng)多了
2014-10-10