亲宝软件园·资讯

展开

JS实现滚动区域触底事件

WahFung 人气:1
# 效果 贴上效果展示: ![](https://img2020.cnblogs.com/blog/1750559/202003/1750559-20200321155304119-132353783.gif) # 实现思路 样式方面不多赘述,滚动区域是给固定高度,设置 `overflow-y: auto` 来实现。 接下来看看js方面的实现,其实也很简单,触发的条件是: `可视高度` + `滚动距离` >= `实际高度` 。例子我会使用`vue`来实现,和原生实现是一样的。 * 可视高度(offsetHeight):通过 `dom` 的 `offsetHeight` 获得,表示区域固定的高度。这里我推荐通过 `getBoundingClientRect()` 来获取高度,因为使用前者会引起浏览器回流,造成一些性能问题。 * 滚动高度(scrollTop):滚动事件中通过 `e.target.scrollTop` 获取,表示滚动条距离顶部的px * 实际高度(scrollHeight):通过 `dom` 的 `scrollHeight` 获得,表示区域内所有内容的高度(包括滚动距离),也就是实际高度 # 基础实现 ``` js 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('触底') } } ``` ![](https://img2020.cnblogs.com/blog/1750559/202003/1750559-20200321154951118-75678353.gif) so easy~ # 加点细节 加点细节,现在我们希望是离底部一定距离就触发事件,而不是等到完全触底。如果你做过小程序,这和`onReachBottom`差不多的意思。 声明一个离底部的距离变量`reachBottomDistance` 这时候触发条件:`可视高度` + `滚动距离` + `reachBottomDistance` >= `实际高度` ```js 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('触底') } } } } ``` ![](https://img2020.cnblogs.com/blog/1750559/202003/1750559-20200321161143553-20484336.gif) 在距离底部100px时成功触发事件,但由于100px往下的区域是符合条件的,会导致一直触发,这不是我们想要的。 接下来做一些处理,让其进入后只触发一次: ```js export default { data(){ return { isReachBottom: false, 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.isReachBottom){ this.isReachBottom = false } if(this.isReachBottom){ return } if (currentHeight >= scrollHeight) { this.isReachBottom = true console.log('触底') } } } } ``` ![](https://img2020.cnblogs.com/blog/1750559/202003/1750559-20200321162716721-1908919984.gif) # 优化 实时去获取位置信息稍微会损耗性能,我们应该把不变的缓存起来,只实时获取可变的部分 ```js export default { data(){ return { isReachBottom: false, reachBottomDistance: 100 scrollHeight: 0, offsetHeight: 0, } }, mounted(){ // 页面加载完成后 将高度存储起来 let dom = document.querySelector('.comment-area .comment-list') this.scrollHeight = dom.scrollHeight this.offsetHeight = Math.ceil(dom.getBoundingClientRect().height) }, methods: { onScroll(e) { let scrollTop = e.target.scrollTop let currentHeight = scrollTop + this.offsetHeight + this.reachBottomDistance if(currentHeight < this.scrollHeight && this.isReachBottom){ this.isReachBottom = false } if(this.isReachBottom){ return } if (currentHeight >= this.scrollHeight) { this.isReachBottom = true console.log('触底') } } } } ``` 实现到这里就告一段落,如果你有更好的思路和值得改进的地方,欢迎交流~

加载全部内容

相关教程
猜你喜欢
用户评论