JS实现滚动条触底加载更多

JavaScript017

JS实现滚动条触底加载更多,第1张

原理

1.通过监听滚动区域DOM的scroll事件, 计算出触底

// 滚动可视区域高度 + 当前滚动位置 === 整个滚动高度

scrollDom.clientHeight + scrollDom.scrollTop === scrollDom.scrollHeight

2.触底后触发列表添加, 列表添加使用createDocumentFragment, 将多次插入的DOM先存入内存, 最后一次填充进去, 提高性能, 也方便后面的MutationObserver监听

3.使用MutationObserver监听列表的DOM添加, 添加完毕后, 隐藏加载中提示

示例

https://codepen.io/klren0312/full/dybgayL

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop

https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onscroll

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment

https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

一：去掉全部的滚动条

第一个方法：

iframe

有一个scrolling属性，它有

auto

,

yes

,

no

这三个值。

scrolling

:

auto

-----在需要的时候滚动条出现

scrolling

:

yes

------始终显示滚动条

scrolling

:

no

-------始终隐藏滚动条

当设置

scrolling

:

no

时，全部的滚动条就没有了。

第二个方法：我发现除了

scrolling

可以去掉全部的滚动条外，还有另一个方法，在嵌入的页面里设置

body{overflow：hidden}，这样也可以将滚动条去掉，而且这也是当我们只想去掉某一个滚动条所使用的属性。

二：去掉右边的滚动条且保留底下的滚动条

如果只想保留底下的滚动条，那么可以在嵌入的页面里设置

body{overflow-x：auto

overflow-y：hidden；}