上拉、下拉无限滚动组件-pc端


场景:

web项目,聊天记录历史搜索。需要支持上拉无限加载,下拉无限加载。

目标:

支持所需场景;可配置。

难点:

顶部无限滚动很麻烦,网上没找着好的解决方案。刚开始 顶部也想使用 IntersectionObserver 特性来做,但二次触发比较麻烦,后来改用监听 scroll 事件。问题又来了,滚动条一直处于顶部,无法保持原来的位置。

本例解决方案是:利用 scrollIntoViewIfNeeded 特性,在组装列表完成后,手动调用,使其滚动到 原来的列表项位置。

成品效果:

凑合能用,O(∩_∩)O哈哈~

代码:

https://github.com/18946168254/scrollLoading-pc


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM