摘要：起因之前自己在使用这种网站时，经常看到无限加载的效果。原理在需要无限加载的列表底部，埋下一个隐藏元素。这时候就需要进行列表加载。通过查阅，得知方法返回元素的大小及其相对于视口的位置。
起因
之前自己在使用这种网站时，经常看到无限加载的效果。
今天正好看到了getBoundingClientRect这个Api，就想着试试看如何实现Infinite scroll的效果。
在需要无限加载的列表底部，埋下一个隐藏元素。
当不断滑动时，隐藏元素将出现在视窗(viewport)里，也就意味着当前浏览的列表已经到底部了。
这时候就需要进行列表加载。
大概的HTML结构如下：
- 我是文章
- 我是文章
- 我是文章
- 我是文章
- 我是文章
也就是：滑动列表 => 隐藏的无限加载指示器出现在视图 => 开始加载
那么重点就是检测隐藏的无限加载指示器是否出现在视图窗口。
还好，我们有getBoundingClientRect这个Api。
通过查阅MDN，得知：
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。而除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
至于兼容性，一片绿，可以放心使用。
DOMRect 对象getBoundingClientRect()方法的返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合 。
对象的属性如下图所示：
其中的 top, left, bottom, right 均是元素自身相对于视图左上角而言的。
就top, left属性而言，很好理解。而bottom, right则一开始搞的有点懵，后面通过devtools观察，发现bottom是元素的最底部相对于视图窗口左上角而言的，而right则是元素的最右侧相对于视图窗口左上角而言的。
其中right-left为元素的宽度,bottom - top则是元素的高度。
在这里，有两种情况，一个是元素是否出现于视图窗口中，另一种则是元素是否完全出现于视图窗口中。
两种情况的区别在于一个是部分出现，一个是完全出现。
下面我把两种情况都写出来：
部分出现在视图窗口中
function checkIsPartialVisible (element) {
const rect = element.getBoundingClientRect()
const {
top,
left,
bottom,
right
} = rect
const isPartialVisible = top >= 0 && left >= 0
return isPartialVisible
}
全部出现于视图窗口中：
function checkIsTotalVisible (element) {
const rect = element.getBoundingClientRect()
const {
top,
left,
bottom,
right
} = rect
const isTotalVisible = (
top >= 0
&&
left >= 0
&&
bottom < document.documentElement.clientHeight
&&
right < document.documentElement.clientWidth
)
return isTotalVisible
}
那么问题来了：我们到底选用那种呢？
从无限加载这个业务场景出发，埋在列表最下边的加载触发器都非常小且不可见，因此推荐选用第二种，也就是完全出现于视图窗口的方式。
至于第一种，更适合检测该元素是否已经出现在视图窗口，但并不要求全部出现的情况。
具体可以看我在jsfiddle上写的demo：
无限加载实例
后续更多的则是一些性能优化的事情，比如debounce或者throttle来减少scroll事件调用次数，加入ajax加载，loading indicator等。
那些都是属于具体的业务范围了，这儿不做讨论。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/50815.html
摘要：起因之前自己在使用这种网站时，经常看到无限加载的效果。原理在需要无限加载的列表底部，埋下一个隐藏元素。这时候就需要进行列表加载。通过查阅，得知方法返回元素的大小及其相对于视口的位置。 起因 之前自己在使用这种网站时，经常看到无限加载的效果。今天正好看到了getBoundingClientRect这个Api，就想着试试看如何实现Infinite scroll的效果。 原理 在需要无限加载...
摘要：大潮来袭前端开发能做些什么去年谷歌和火狐针对提出了的标准，顾名思义，即的体验方式，我们可以戴着头显享受沉浸式的网页，新的标准让我们可以使用语言来开发。 VR 大潮来袭 --- 前端开发能做些什么 去年谷歌和火狐针对 WebVR 提出了 WebVR API 的标准，顾名思义，WebVR 即 web + VR 的体验方式，我们可以戴着头显享受沉浸式的网页，新的 API 标准让我们可以使用 ...
摘要：优秀无限滚动的五项原则将无限滚动做好，并不是不可能完成的任务。提供为特定项添加书签的可能无限滚动最常见的缺点之一就是，内容出现的时候，没法添加书签。结论无限滚动实现得好的话，可以达到令人难以置信的光滑无缝体验。 本文转载自：众成翻译译者：文蔺链接：http://www.zcfy.cc/article/673原文：https://uxplanet.org/infinite-scrolli...
摘要：实现列表动态无限滚动问题在开发页面工程中，经常会遇到滚动列表当实际需要显示的内容宽度或高度超过容器的宽度或高度时，设置当滚动列表中的内容比较少时，我们可以一次性加载所有的内容到列表容器中显示。 JS+HTML实现列表动态无限滚动 问题 在HTML开发页面工程中，经常会遇到滚动列表-当实际需要显示的内容宽度或高度超过容器的宽度或高度时，设置CSS overflow-x:auto;...
摘要：实现列表动态无限滚动问题在开发页面工程中，经常会遇到滚动列表当实际需要显示的内容宽度或高度超过容器的宽度或高度时，设置当滚动列表中的内容比较少时，我们可以一次性加载所有的内容到列表容器中显示。 JS+HTML实现列表动态无限滚动 问题 在HTML开发页面工程中，经常会遇到滚动列表-当实际需要显示的内容宽度或高度超过容器的宽度或高度时，设置CSS overflow-x:auto;...
阅读 2469·2021-11-17 09:33
阅读 757·2021-11-04 16:13
阅读 1328·2021-10-14 09:50
阅读 691·2019-08-30 15:53
阅读 3657·2019-08-30 14:18
阅读 3267·2019-08-30 14:14
阅读 2092·2019-08-30 12:46
阅读 3177·2019-08-26 14:05
