快捷導(dǎo)航

JavaScript判斷頁(yè)面是否滾動(dòng)到底部的技巧

更新時(shí)間：2023年11月07日 09:20:44 作者：Wario

在 JavaScript 中,我們可以通過(guò)一些技巧來(lái)判斷頁(yè)面是否滾動(dòng)到底部,本文將介紹一些常用的方法,幫助你在項(xiàng)目中實(shí)現(xiàn)這一功能,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下

判定頁(yè)面到達(dá)底部

JS：

// HTML 文檔返回對(duì)象為HTML元素
let docEl = document.documentElement;
// 瀏覽器可視部分的高度
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
window.addEventListener('scroll', function () {
  // 頁(yè)面中內(nèi)容的總高度
  let docELHeight = docEl.scrollHeight; 
  // 頁(yè)面內(nèi)已經(jīng)滾動(dòng)的距離
  let scrollTop = docEl.scrollTop; 
  // 頁(yè)面上滾動(dòng)到底部的條件
  if (scrollTop == docELHeight - clientHeight) {
    // 頁(yè)面內(nèi)已經(jīng)滾動(dòng)的距離 = 頁(yè)面中內(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判斷頁(yè)面是否滾動(dòng)到底部的技巧的詳細(xì)內(nèi)容，更多關(guān)于JavaScript頁(yè)面是否滾動(dòng)到底部的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

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