在用户滚动时继续修改 DOM

Posted 2023-05-09

【中文标题】在用户滚动时继续修改 DOM

【英文标题】：Continue modifying DOM as user scrolls

【发布时间】：2016-11-03 08:01:13

【问题描述】：

我有一个基于关键字修改 DOM 的 chrome 扩展。问题是，对于像 twitter 这样无限滚动的网站，我需要一种方法让我的函数在用户滚动页面时保持触发。

.livequery() 是唯一的方法还是有更好的方法？

现在所有的逻辑都是纯 javascript/Jquery，但如果这是最好的方法，我愿意使用像 Angular 这样的框架。

I have several functions that interact -
1) a hide() function that adds a class to divs containing words I want hidden
2) a walk() function that walks the DOM and identifies divs to call hide() on
3) walkWithFilter() function that gets words to filter from localstorage and calls walk() function 

最后一个函数walkWithFilter()在window.onload()事件中被调用

【参考方案1】：

似乎onScroll 事件很自然地匹配了这个。诀窍是您需要跟踪已处理的内容以避免重新处理旧内容。如果您假设用户总是在现有内容下方公开新内容，那可能就像保留指向最后处理的项目的指针并从那里重新启动 walkWithFilter 方法一样简单。不过，这对我来说似乎不是一个完全安全的假设。

如果您想在这方面更加健壮，您可以尝试虚拟 DOM 方法：您保留上次看到的 DOM 的副本，将其与当前存在的 DOM 进行比较，然后进行比较。我知道有很多premade libraries 用于这种事情，但我没有使用过任何一个，也不能推荐一个特定的（链接只是指向谷歌中出现的第一个示例）。如果您愿意的话，这对roll your own 来说似乎也不会过于繁琐。