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)文章
下面小編就為大家?guī)硪黄粋€簡單的JavaScript Map實例(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
判斷變量是否空值undefined, null, '', false, 0, [], {} 均返回true，否則返回false2008-10-10
JavaScript 是弱類型語言, 為了保證數(shù)值的有效性, 在處理數(shù)值的時候, 我們可以對數(shù)值字符串進行強行轉(zhuǎn)換. 如 parseInt 取整和 parseFloat 取浮點數(shù)2011-05-05
解決layui中table異步數(shù)據(jù)請求不支持自定義返回數(shù)據(jù)格式的問題
今天小編就為大家分享一篇解決layui中table異步數(shù)據(jù)請求不支持自定義返回數(shù)據(jù)格式的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
JavaScript轉(zhuǎn)換農(nóng)歷類實現(xiàn)及調(diào)用方法
農(nóng)歷是日常生活中不可或缺的一部分，它與人類的生活息息相關(guān)，從某種程度上說，它一直伴隨著我們，今天的任務(wù)是JavaScript轉(zhuǎn)換農(nóng)歷類的實現(xiàn)，感興趣的你可以千萬不要錯過，希望本文對你有所幫助2013-01-01
這篇文章主要介紹了JavaScript中防止微信瀏覽器被整體拖動的方法,需要的朋友可以參考下2017-08-08
Textarea根據(jù)內(nèi)容自適應(yīng)高度
使用JAVASCRIPT控制Textarea內(nèi)容自適應(yīng)高度，實施起來很簡單，很平滑。2013-10-10
JavaScript遍歷對象并獲取key和value的幾種常見方法
在JavaScript中,遍歷對象的屬性和值是常見的操作,特別是在處理數(shù)據(jù)對象或者進行對象的序列化時,這里我們將深入探討幾種JavaScript遍歷對象并獲取key和value的幾種常見方法,需要的朋友可以參考下2025-07-07
javascript HTML5 Canvas實現(xiàn)圓盤抽獎功能
這篇文章主要為大家詳細介紹了javascript HTML5 Canvas實現(xiàn)圓盤抽獎功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要給大家介紹了關(guān)于echarts實現(xiàn)雷達圖的詳細步驟,雷達圖(Radar?Chart)是一種信息豐富的可視化工具,其中多個變量（三個或更多）在二維平面上進行比較,文中給出了完整的代碼示例,需要的朋友可以參考下2024-01-01