用户滚动时继续修改DOM

时间:2016-07-01 03:07:13

标签: javascript jquery angularjs dom infinite-scroll

我有一个chrome扩展程序,可以根据关键字修改DOM。问题是,对于像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 个答案:

答案 0 :(得分:2)

onScroll事件似乎与此完全匹配。诀窍在于,您需要跟踪已处理的内容,以避免重新处理旧内容。如果您假设用户始终在现有内容下面显示新内容,那么这可能就像保留指向上一个已处理项目的指针并从那里重新启动walkWithFilter方法一样简单。但这对我来说似乎并不是一个完全安全的假设。

如果你想在这方面更加健壮,你可以尝试一种虚拟DOM方法:你在上次看到它时保留DOM的副本,将它与当前存在的DOM进行比较,并采取差异。我知道有很多premade libraries用于此类事情,但我没有使用任何内容,也无法推荐特定的内容(链接只是出现在第一个示例中)谷歌)。如果您非常倾向于roll your own,它似乎也不会过于繁琐。