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