javascript - 滚动链接效果已被弃用,现代浏览器中有什么更好的选择?

标签 javascript html scroll

我目前正在维护一个旧的遗留项目,我刚刚注意到我的浏览器发出一条关于滚动链接效果如何降低渲染性能的消息。

应用程序正在渲染一个大表单,底部有一个包含大量数据的 slider ,这些数据将异步加载(并且只有当用户向下滚动时,它才会进入他的 View )。然后,它会创建大量 DOM 元素(很多意味着典型的 100-300 个图形,每个图形包含图像、文本和一些属性),这些元素将添加到 slider 中。

所以我在读about Scroll-linked effects on MDN解决这个性能问题,但我不知道最佳实践是什么。我既不能使用有关“粘性定位”也不能使用“滚动捕捉”的示例。我也不想以任何方式自定义滚动。 此行为的目标是尽可能延迟加载大量数据(因为只有当用户向下滚动此页面时,他才真正需要这些数据)。

您能帮助我如何利用这一点,在不失去延迟加载功能的情况下优化应用程序的滚动性能吗?

最佳答案

您可以使用检查视口(viewport)中可见的元素 + requestAnimationframe的组合

https://stackoverflow.com/a/125106/800765

关于javascript - 滚动链接效果已被弃用,现代浏览器中有什么更好的选择?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42712789/

相关文章:

javascript - 如何检查客户端浏览器是否阻止了 font awesome?

javascript - 将 php 变量添加到从之前转换为 php 的 html/javascript 语句

css - 在移动 View 中仅缩小一张图像

html - 试图让左右箭头粘在大图像的边缘。

javascript - 捆绑 Node.js 后端 - 好的做法还是坏的做法?

css - HTML div 高度大于预期

jquery - 如何使用按钮(图像)在 Horizo​​ntal Div Scroll 上应用检查?

ios - TableView 不滚动且单元格未启用

Android 小部件滚动

javascript - 将自定义功能添加到 chrome 的控制台