clientHeight、offsetHeight、scrollHeight、scrollTop的区别以及上拉加载的实现

2024-04-11 13:23:14

clientHeight、offsetHeight、scrollHeight、scrollTop的介绍

在前端的项目中，为了提高性能经常会使用到上拉加载，clientHeight、offsetHeight、scrollHeight、scrollTop是实现上拉加载的关键。所以，首先来介绍下三者的意义以及区别。
clientHeight：表示的是当前显示的元素的高度，如果存在X轴的滚动条与根元素边框，不包括X轴的滚动条与根元素边框的高度。
offsetHeight：也表示的是当前显示元素的高度，与clientHeight类似，但offsetHeight包括X轴的滚动条与根元素边框的高度。
scrollHeight：表示内容区域的整个高度，包括溢出的内容区域，即滚动条的高度。
scrollTop：表示的是滚动条滚动的高度，初始未滚动时的高度为0。
具体如下图所示：

有上图可知：offsetHeight+scrollTop>=scrollHeight时，代表滚动条滑动了底部。

上拉加载的实现

有上可知，当滚动条滑动到底部时，即offsetHeight+scrollTop>=scrollHeight时，我们可以加载新的内容，从而实现上拉加载。因此，我们需要监听滚动条的变化。可以使用 onScroll(e)方法进行监听，其中参数e中包含了滚动条的各种信息。我这里使用vue提供的一种@scroll进行滚动条的监听。

<template><div id="app" @scroll="handkeScroll"><div>ghg</div><div>gfhd</div><div>ghd</div><div>gfhd</div><div>gfdhd</div><div>dgfhd</div><div>dhgd</div><div>dhgd</div><div>dhgfdh</div><div>dhgd</div><div>dfhgdgh</div><div>fdghdhg</div><div>fgdhd</div><div>dgggf</div><div>gfdhg</div><div>gfhdhgf</div><div>ghfgdf</div><div>fghdh</div><div>gdhdh</div><div>gfhdh</div></div>
</template><script>export default {name: 'App',methods:{handkeScroll(e){console.log(e);let offsetHeight =  e.srcElement.offsetHeight;let scrollTop = e.srcElement.scrollTop;let scrollHeight = e.srcElement.scrollHeight;console.log(offsetHeight,scrollTop,scrollHeight);if(offsetHeight+scrollTop>=scrollHeight){//滚轮到底，可以进行内容加载//进行内容添加的操作即可}}},
}
</script><style lang="scss">
#app{height: 100%;width: 100%;overflow-y: scroll;& div:nth-child(2n){height: 200px;width: 100%;}& div:nth-child(2n+1){height: 200px;width: 100%;}
}
</style>

clientHeight、offsetHeight、scrollHeight、scrollTop的区别以及上拉加载的实现相关推荐

js上拉加载ajax数据,原生ajax写的上拉加载实例
上拉加载的思路 1 上拉加载是要把屏幕拉到最底部的时候触发ajax事件请求数据 2.所有要获取屏幕的高度文档的高度和滚动的高度下面的代码是已经做好了兼容的可以直接拿来用 Javascript: ...
Vue 组件封装之 ScrollView 上拉加载更多
Vue 组件封装之 ScrollView 上拉加载更多一.ScrollView 上拉加载更多二.使用案例三.API 使用指南四.源代码一.ScrollView 上拉加载更多组件说明: 实现 ...
如何实现上拉加载，下拉刷新？
如何实现上拉加载,下拉刷新? 一.前言二.实现原理上拉加载下拉刷新三.案例小结一.前言下拉刷新和上拉加载这两种交互方式通常出现在移动端中本质上等同于PC网页中的分页,只是交互形式不同 ...
原生js实现上拉加载
地址列表组件没有无法使用上拉加载,所以原生js实现给列表部分注册touchmove事件,监听用户滑动屏幕判断滚动条的位置距离底部高度为100时,page+1,并且拉去接口当接口调取过程中或者已经 ...
vue移动端下拉刷新组件、上拉加载组件
1.下拉刷新DropDownRefresh.vue <template> <div @touchstart="touchStart($event)" @touch ...
vue 仿B站下拉刷新上拉加载
vue 仿B站下拉刷新上拉加载功能大部分都是跟B站一样的,还是有一些瑕疵和小bug的,φ(>ω<*) 先上demo连接和gitHub项目地址吧 demo展示 https://github ...
vue移动端下拉刷新、上拉加载
由于自身的项目比较简单,只有几个H5页面,用来嵌入app中,所有没有引入移动端的UI框架,但是介于能让用户在浏览H5页面时有下拉刷新和上拉加载,有更好的用户体验,自己写组件实现. 1.下拉刷新Drop ...
H5上拉加载以及在微信内置浏览器上拉加载失效问题记录
第一次采用了距离顶部距离的方式来控制上拉加载 $(window).scroll(function () {// 滚动条距离顶部的距离大于 200px时if ($(window).scrollTop( ...
Jquery 实现H5页面上拉加载更多
在最新的H5开发项目中,需要开发上拉加载更多的功能,如何实现上拉加载更多,网上有很多插件可以实现,如:mescroll.mui.isScroll等等,最初我也是选择了使用插件,但在使用过程中发现了如果 ...
如何实现上拉加载和下拉刷新
下拉刷新和上拉加载这两种交互⽅式通常出现在移动端中本质上等同于PC⽹⻚中的分⻚,只是交互形式不同开源社区也有很多优秀的解决⽅案,如 iscroll . better-scroll . pullto ...

最新文章

热门文章