基于滾動條位置判斷的簡單實(shí)例

更新時(shí)間：2017年12月14日 15:20:12 作者：止戰(zhàn)之殤丶

下面小編就為大家分享一篇基于滾動條位置判斷的簡單實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

實(shí)例如下所示：

//獲取滾動條距離頂部位置
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);
}
//判斷滾動條是否達(dá)到底部
getScrollTop() + getClientHeight() == getScrollHeight()

以上這篇基于滾動條位置判斷的簡單實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Bootstrap select多選下拉框?qū)崿F(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap select多選下拉框?qū)崿F(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下代碼
2016-12-12
深入理解requireJS-實(shí)現(xiàn)一個(gè)簡單的模塊加載器
本篇文章主要介紹了深入理解requireJS-實(shí)現(xiàn)一個(gè)簡單的模塊加載器，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-01-01
JavaScript中的方法重載實(shí)例
這篇文章主要介紹了JavaScript中的方法重載實(shí)例,本文直接給出重載實(shí)例,需要的朋友可以參考下
2015-03-03
父元素與子iframe相互獲取變量和元素對象的具體實(shí)現(xiàn)
父元素與子iframe相互獲取變量和元素對象的方法有很多,本文提供了一些不錯(cuò)的示例另收集網(wǎng)上的一些，可以參考下
2013-10-10
JavaScript常用的3種彈出框(提示框?alert/確認(rèn)框?confirm/輸入框?prompt)
三種彈框在系統(tǒng)中都是同步執(zhí)行的，也就是說，三種彈框中的任一彈框彈出，代碼都不在執(zhí)行，直到點(diǎn)擊確認(rèn)或取消，關(guān)閉彈窗后，代碼繼續(xù)執(zhí)行，本文通過實(shí)例代碼給大家分享JS常用的3種彈出框，感興趣的朋友一起看看吧
2022-07-07
一文了解你不知道的JavaScript生成器篇
ES6引入了一個(gè)新的函數(shù)類型，發(fā)現(xiàn)它并不符合這種運(yùn)行到結(jié)束的特性。這類新的函數(shù)被稱為生成器。生成器的出現(xiàn)是我們知道原來有時(shí)代碼并不會順利的運(yùn)行，可以通過暫停的方式進(jìn)行異步回調(diào)，讓我們摒棄了此前的認(rèn)知。本文就來聊聊JavaScript中生成器的相關(guān)知識
2022-11-11
淺析javascript中的DOM
本文主要給大家簡單介紹了是什么是DOM、動態(tài)操作DOM元素的方法、使用jsjs操作樣式以及Form對象的簡介，是個(gè)人對于javascript中的DOM的理解的總結(jié)，推薦給小伙伴們。
2015-03-03
Javascript 繼承機(jī)制的實(shí)現(xiàn)
要用ECMAScript實(shí)現(xiàn)繼承機(jī)制，首先從基類入手。所有開發(fā)者定義的類都可作為基類。出于安全原因，本地類和宿主類不能作為基類，這樣可以防止公用訪問編譯過的瀏覽器級的代碼，因?yàn)檫@些代碼可以被用于惡意攻擊。
2009-08-08
微信小程序?qū)崿F(xiàn)炫酷的彈出式菜單特效
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)炫酷的彈出式菜單特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-01-01
js+canvas實(shí)現(xiàn)刮刮獎(jiǎng)功能
這篇文章主要為大家詳細(xì)介紹了js+canvas實(shí)現(xiàn)刮刮獎(jiǎng)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09