JS實(shí)現(xiàn)滾動(dòng)觸底的思路與代碼(附PC端滾動(dòng)分頁加載數(shù)據(jù))
更新時(shí)間：2024年06月22日 09:38:37 作者：扶蘇1002
Javascript實(shí)現(xiàn)當(dāng)頁面滾動(dòng)到底部時(shí)觸發(fā)加載事件,可以通過監(jiān)聽窗口的滾動(dòng)事件,同時(shí)判斷當(dāng)前滾動(dòng)條的位置和文檔總高度來實(shí)現(xiàn)該功能,這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)滾動(dòng)觸底的思路與代碼,文中還附PC端滾動(dòng)分頁加載數(shù)據(jù),需要的朋友可以參考下
一、html和css結(jié)構(gòu)
可視區(qū)固定500px，設(shè)置 overflow-y: auto 來實(shí)現(xiàn)滾動(dòng)。
1.1、html
<template>
<div class="scroll" ref="scroll" @scroll="onScroll">
<div class="crad" v-for="i in 10" :key="i"></div>
</div>
</template>
1.2、css
<style lang="scss" scoped>
.scroll {
overflow: auto;
height: 500px;
.crad {
height: 200px;
margin-top: 10px;
background-color: red;
}
}
</style>
1.3、效果如下
二、實(shí)現(xiàn)思路
觸發(fā)的條件是： 可視高度 + 滾動(dòng)距離 >= 實(shí)際高度 。例子我會(huì)使用vue來實(shí)現(xiàn)，和原生實(shí)現(xiàn)是一樣的。
- 可視高度(offsetHeight)：通過 dom 的
offsetHeight獲得，表示區(qū)域固定的高度。這里我推薦通過getBoundingClientRect()來獲取高度，因?yàn)槭褂们罢邥?huì)引起瀏覽器回流，造成一些性能問題。 - 滾動(dòng)高度
(scrollTop)：滾動(dòng)事件中通過e.target.scrollTop獲取，表示滾動(dòng)條距離頂部的px - 實(shí)際高度(
scrollHeight)：通過dom 的 scrollHeight獲得，表示區(qū)域內(nèi)所有內(nèi)容的高度（包括滾動(dòng)距離），也就是實(shí)際高度
2.1、基礎(chǔ)實(shí)現(xiàn)
onScroll(e) {
let scrollTop = e.target.scrollTop
let scrollHeight = e.target.scrollHeight
let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
let currentHeight = scrollTop + offsetHeight
if (currentHeight >= scrollHeight) {
console.log('觸底')
}
}
2.2、添加距離底部多少距離觸發(fā)
現(xiàn)在我們希望是離底部一定距離就觸發(fā)事件，而不是等到完全觸底。如果你做過小程序，這和onReachBottom差不多的意思。
聲明一個(gè)離底部的距離變量
reachBottomDistance這時(shí)候觸發(fā)條件：可視高度 + 滾動(dòng)距離 + reachBottomDistance >= 實(shí)際高度
export default {
data(){
return {
reachBottomDistance: 100
}
},
methods: {
onScroll(e) {
let scrollTop = e.target.scrollTop
let scrollHeight = e.target.scrollHeight
let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
let currentHeight = scrollTop + offsetHeight + this.reachBottomDistance
if (currentHeight >= scrollHeight) {
console.log('觸底')
}
}
}
}
2.3、再次優(yōu)化
在距離底部100px時(shí)成功觸發(fā)事件，但由于100px往下的區(qū)域是符合條件的，會(huì)導(dǎo)致一直觸發(fā)，這不是我們想要的。
接下來做一些處理，讓其進(jìn)入后只觸發(fā)一次:
export default {
data(){
return {
flag: true,
reachBottomDistance: 100
}
},
methods: {
onScroll(e) {
let scrollTop = e.target.scrollTop
let scrollHeight = e.target.scrollHeight
let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
let currentHeight = scrollTop + offsetHeight + this.reachBottomDistance
if (currentHeight >= scrollHeight && this.flag) {
console.log('觸底')
this.flag = false
}
}
}
}
2.4、最終優(yōu)化
實(shí)時(shí)去獲取位置信息稍微會(huì)損耗性能，我們應(yīng)該把不變的緩存起來，只實(shí)時(shí)獲取可變的部分
export default {
data(){
return {
flag: true,
reachBottomDistance: 100
offsetHeight: 0,
}
},
mounted(){
// 頁面加載完成后 將可視區(qū)高度存儲(chǔ)起來
let dom = this.$refs['scroll']
this.offsetHeight = Math.ceil(dom.getBoundingClientRect().height)
},
methods: {
onScroll(e) {
let scrollTop = e.target.scrollTop
let scrollHeight = e.target.scrollHeight
let currentHeight = scrollTop + this.offsetHeight + this.reachBottomDistance
if (currentHeight >= scrollHeight && this.flag) {
console.log('觸底')
this.flag = false
}
}
}
}
三、利用觸底事件實(shí)現(xiàn)滾動(dòng)分頁加載
<template>
<div class="scroll"
ref='scroll'
@scroll="onScroll">
<div class="crad"
v-for="item in showList"
:key='item.id'></div>
<p v-show="status=='loading'">加載中</p>
<p v-show="status=='nomore'">沒有更多了</p>
</div>
</template>
<script>
import { fetchList } from '@/api/index';
export default {
data () {
return {
flag: true,
reachBottomDistance: 100,
offsetHeight: 0,
// 展示區(qū)list
showList: [],
pageIndex: 1,
pageSize: 20,
totalPage: 0,
status: 'nomore'
};
},
mounted () {
// 頁面加載完成后 將可視區(qū)高度存儲(chǔ)起來
let dom = this.$refs['scroll']
this.offsetHeight = Math.ceil(dom.getBoundingClientRect().height)
this.getDataList()
},
methods: {
onScroll(e) {
let scrollTop = e.target.scrollTop
let scrollHeight = e.target.scrollHeight
let currentHeight = scrollTop + this.offsetHeight + this.reachBottomDistance
if (currentHeight >= scrollHeight && this.flag) {
console.log('觸底')
this.flag = false
this.pageIndex++;
this.getDataList();
}
},
getDataList () {
fetchList({ current: this.pageIndex, size: this.pageSize }).then((res) => {
let list = res.data.data.list;
this.totalPage = res.data.data.totalPage;
this.showList = this.showList.concat(list);
if (this.totalPage > this.showList.length) {
this.status = 'loading';
//如果還有更多重新設(shè)置flag為true
this.flag = true
} else {
this.status = 'nomore';
//沒有更多flag設(shè)置為false不在執(zhí)行觸底加載
this.flag = false
}
});
}
}
}
</script>
<style lang='scss' scoped>
.scroll {
overflow: auto;
height: 500px;
.crad {
height: 200px;
margin-top: 10px;
background-color: red;
}
}
</style>總結(jié)
到此這篇關(guān)于JS實(shí)現(xiàn)滾動(dòng)觸底的思路與代碼的文章就介紹到這了,更多相關(guān)JS實(shí)現(xiàn)滾動(dòng)觸底內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
JavaScript中的函數(shù)申明、函數(shù)表達(dá)式、箭頭函數(shù)
js中的函數(shù)可以通過幾種方式創(chuàng)建，具體創(chuàng)建方法通過實(shí)例代碼給大家介紹的非常詳細(xì)，文中通過例子給大家介紹了函數(shù)聲明和表達(dá)式之間的差別，感興趣的朋友跟隨小編一起看看吧2019-12-12
vscode?對(duì)?typescript代碼調(diào)試的步驟
在VS?Code中，要對(duì)?TypeScript代碼進(jìn)行調(diào)試，需要先編譯?TypeScript?代碼為JavaScript代碼，這篇文章主要介紹了vscode對(duì)typescript代碼調(diào)試的方法,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了JS實(shí)現(xiàn)彈性漂浮效果的廣告代碼,涉及javascript動(dòng)態(tài)操作圖片彈性運(yùn)動(dòng)效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能，制作能進(jìn)行加減乘除的計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
在JavaScript中，有5種基本數(shù)據(jù)類型和1種復(fù)雜數(shù)據(jù)類型，基本數(shù)據(jù)類型有：Undefined, Null, Boolean, Number和String；復(fù)雜數(shù)據(jù)類型是Object，Object中還細(xì)分了很多具體的類型，比如：Array, Function, Date等等2015-08-08
這篇文章主要介紹了微信小程序按鈕巧妙用法,按鈕組件功能比?HTML?中的?button?按鈕豐富，通過?open-type?屬性可以調(diào)用微信提供的各種功能（客服、轉(zhuǎn)發(fā)、獲取用戶授權(quán)、獲取用戶信息等），需要的朋友可以參考下2022-12-12
微信小程序中使用Async-await方法異步請(qǐng)求變?yōu)橥秸?qǐng)求方法
這篇文章主要介紹了微信小程序中使用Async-await方法異步請(qǐng)求變?yōu)橥秸?qǐng)求方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-03-03
HTML5 canvas 9繪制圖片2016-09-09
javascript獲取dom的下一個(gè)節(jié)點(diǎn)方法
這篇文章主要介紹了javascript獲取dom的下一個(gè)節(jié)點(diǎn)方法,實(shí)現(xiàn)在頁面點(diǎn)擊加減按鈕數(shù)字的累加，需要的朋友可以參考下2014-09-09
JavaScript樹形數(shù)據(jù)結(jié)構(gòu)處理
這篇文章主要介紹了JavaScript樹形數(shù)據(jù)結(jié)構(gòu)處理，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-07-07