JavaScript判斷頁面是否滾動(dòng)到底部的技巧
更新時(shí)間：2023年11月07日 09:20:44 作者：Wario
在 JavaScript 中,我們可以通過一些技巧來判斷頁面是否滾動(dòng)到底部,本文將介紹一些常用的方法,幫助你在項(xiàng)目中實(shí)現(xiàn)這一功能,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
判定頁面到達(dá)底部
JS：
// HTML 文檔返回對(duì)象為HTML元素
let docEl = document.documentElement;
// 瀏覽器可視部分的高度
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
window.addEventListener('scroll', function () {
// 頁面中內(nèi)容的總高度
let docELHeight = docEl.scrollHeight;
// 頁面內(nèi)已經(jīng)滾動(dòng)的距離
let scrollTop = docEl.scrollTop;
// 頁面上滾動(dòng)到底部的條件
if (scrollTop == docELHeight - clientHeight) {
// 頁面內(nèi)已經(jīng)滾動(dòng)的距離 = 頁面中內(nèi)容的總高度 - 瀏覽器可視部分的高度
console.log('到達(dá)底部了！');
}
});
判定元素內(nèi)滾動(dòng)到達(dá)底部
CSS：
div {
overflow: auto;
margin: 250px auto;
width: 80px;
height: 100px;
background-color: rgb(204, 126, 255);
}
HTML：
<div> 保護(hù)大自然 保護(hù)大自然 保護(hù)大自然 保護(hù)大自然 保護(hù)大自然 保護(hù)大自然 保護(hù)大自然 </div>
JS：
// 獲取元素
let div = document.querySelector('div');
// div中內(nèi)容的總高度
let scrollHeight = div.scrollHeight;
// 給div添加滾動(dòng)事件
div.addEventListener('scroll', function () {
// div 內(nèi)已滾動(dòng)的距離
let scrollTop = div.scrollTop;
// 元素內(nèi)滾動(dòng)條到底部的條件
if (scrollTop == scrollHeight - div.clientHeight) {
// div 內(nèi)已滾動(dòng)的距離 = div中內(nèi)容的總高度 - div 元素的高度
console.log('到達(dá)底部了！');
}
});
以上就是JavaScript判斷頁面是否滾動(dòng)到底部的技巧的詳細(xì)內(nèi)容，更多關(guān)于JavaScript頁面是否滾動(dòng)到底部的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
小編給大家總結(jié)了JS最常用到的幾種消息提示框，大家應(yīng)該經(jīng)常用的到，一起學(xué)習(xí)下吧。2018-02-02
本文通過一段實(shí)例代碼給大家介紹了JS仿萬科底部的新聞滑動(dòng)特效代碼，需要的朋友參考下2017-09-09
簡(jiǎn)單介紹JavaScript數(shù)據(jù)類型之隱式類型轉(zhuǎn)換
這篇文章主要介紹了簡(jiǎn)單介紹JavaScript數(shù)據(jù)類型之隱式類型轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下2015-12-12
JavaScript 實(shí)現(xiàn)拖拽效果組件功能(兼容移動(dòng)端)
這篇文章主要介紹了JavaScript 實(shí)現(xiàn)拖拽效果組件功能(兼容移動(dòng)端),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
Javascript 制作圖形驗(yàn)證碼實(shí)例詳解
這篇文章主要介紹了Javascript 制作圖形驗(yàn)證碼實(shí)例詳解的相關(guān)資料,附有實(shí)例代碼及實(shí)現(xiàn)效果圖，需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)圖片自動(dòng)播放效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家詳細(xì)介紹了基于Javascript倒計(jì)時(shí)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
ie支持function.bind()方法實(shí)現(xiàn)代碼
在 google 一番技術(shù)資料后，發(fā)現(xiàn) firefox 原生支持一個(gè) bind 方法，該方法很好的滿足了我們的初衷，調(diào)用方法與 call 和 apply 一樣，只是定義完成后，在后期調(diào)用時(shí)該方法才會(huì)執(zhí)行,需要的朋友可以了解下2012-12-12
JavaScript前端實(shí)現(xiàn)GIF圖片循環(huán)播放
使用 img 加載 GIF 圖片,內(nèi)容只會(huì)播放一次,之后就會(huì)自動(dòng)暫停,所以這篇文章為大家介紹了如何使用JavaScript實(shí)現(xiàn)GIF圖片循環(huán)播放吧2025-03-03
大家都知道，C#中使用的是傳統(tǒng)的類繼承是很簡(jiǎn)單，但在JS中，可就沒這么簡(jiǎn)單了，因?yàn)樗褂玫氖窃?prototype )繼承，實(shí)現(xiàn)起來相對(duì)復(fù)雜了一點(diǎn)。2011-10-10