无限滚动的页面实现

最新推荐文章于 2024-05-22 13:52:22 发布

Esen_Y

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量143

点赞数

文章标签：前端 html5

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/Esen_Y/article/details/130887279

版权

首先想了解这方面的朋友需要先去把dom部分学习一遍,否则看不懂,再急着用也没有用

方法很笨,但简单粗暴,我一样主学后端的了解就行了,如果想走前端的朋友就请另请高明了

以下是代码

监听窗口事件,获取top的距离和视窗的距离

如果长度大于或者等于当前页面的总高度时候,创建一个div元素

执行innerHtml设置newDiv的值

innerHtml只能插入一行,这很烦,并且,如果数据的最外层是双引号则内部html使用的只能是引号

否则报错

反之亦然

这里是对id为main的元素插入newDiv

使用 appendChild方法插入这个newDiv

特别注意

appendChild本身是将一个元素里的子元素放入另一个元素,可以说是移动一个子元素到另一个元素,其本质是移动,所有要注意newDiv的位置,需要添加一次后就结束,下一次使用新建的,所以放在方法里面,此外如果采用id获取元素则不要定义newDiv的id与原div子元素一样,可能会发现,最后的一个元素动一次就不了,

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
无限滚动的页面实现

innerHtml只能插入一行,这很烦,并且,如果数据的最外层是双引号则内部html使用的只能是引号。方法很笨,但简单粗暴,我一样主学后端的了解就行了,如果想走前端的朋友就请另请高明了。首先想了解这方面的朋友需要先去把dom部分学习一遍,否则看不懂,再急着用也没有用。如果长度大于或者等于当前页面的总高度时候,创建一个div元素。这里是对id为main的元素插入newDiv。监听窗口事件,获取top的距离和视窗的距离。执行innerHtml设置newDiv的值。
复制链接

扫一扫

Esen_Y CSDN认证博客专家 CSDN认证企业博客

码龄2年

5: 原创

174万+: 周排名

81万+: 总排名

477: 访问

: 等级

50: 积分

0: 粉丝

0: 获赞

4: 评论

0: 收藏

私信

关注

热门文章

分类专栏

this.$emit 1篇
prop 1篇

最新评论

Handler dispatch failed: java.lang.NoClassDefFoundError: javax/xml/bind/DatatypeConverter
CSDN-Ada助手: 恭喜您撰写第5篇博客！标题“Handler dispatch failed: java.lang.NoClassDefFoundError: javax/xml/bind/DatatypeConverter”看起来很有挑战性。这篇博客似乎涉及到了一个错误的处理问题，可能会引起一些程序员的兴趣。您的博客一直以来都很有深度和见解，我很期待了解更多关于这个错误的背景和解决方案。同时，我也想提供一些建议，希望对您未来的创作有所帮助。您可以考虑添加一些关于这个错误的常见原因和可能的解决方法的介绍。此外，您还可以分享一些您个人在解决这个问题时的经验和技巧，这将使您的博客更具实用性和价值。再次恭喜您并期待您未来更多的博客作品！请继续保持创作的热情和努力！
无限滚动的页面实现
CSDN-Ada助手: 恭喜您写出了这篇关于无限滚动页面实现的博客，很棒！我觉得您可以考虑分享一些关于如何增加页面交互性的内容，这样可以让读者更加深入地了解无限滚动页面的应用场景和优势。希望您能继续保持创作热情，我们期待看到更多优质的文章。 CSDN 正在通过评论红包奖励优秀博客，请看红包流：https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3，我们会奖励持续创作和学习的博主，请看：https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply3
Expected one result (or null) to be returned by selectOne和has an unsupported return type
CSDN-Ada助手: 恭喜您写了第四篇博客，内容也越来越丰富了！关于博客中提到的异常，我想说可能是因为返回类型不支持所导致的问题。在下一篇博客中，您可以深入探讨一下这个问题，或者分享一些解决该问题的方法。期待您的下一篇作品！ CSDN 会根据你创作的前四篇博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply4 看奖励名单。
简介Java的object.equals与==的区别
CSDN-Ada助手: 非常感谢你分享这篇关于Java中object.equals与==区别的博客，非常清晰明了。希望你能继续分享关于Java的知识，让更多人受益。另外，关于Java中的字符串操作，除了equals和==的区别，还有很多有趣的知识点，比如String类的不可变性、StringBuffer和StringBuilder的使用等等，也可以一起探讨。期待你未来更多的分享。如何写出更高质量的博客，请看该博主的分享：https://blog.csdn.net/lmy_520/article/details/128686434?utm_source=csdn_ai_ada_blog_reply2
关于新人学vue中的父子组件传递数据
CSDN-Ada助手: Vue入门技能树或许可以帮到你：https://edu.csdn.net/skill/vue?utm_source=AI_act_vue

大家在看

最新文章

目录

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。