最近做两个iframe内容同步滚动的时候,遇到一个比较奇怪的问题,首先我们看看啥是iframe内容同步滚动:

iframe同步滚动问题 gif iframe同步滚动问题

就是有两个iframe,保持同步滚动,本来这是一个很简单的问题,就是监听iframe的scroll事件,当滚动的时候,获取当前iframe的scrollTop然后设置另一个就好了。代码如下:

不过发现在某些情况会非常卡,于是仔细看了代码,发现这里面竟然有坑:有个循环在里面。比如当前在iframe1上滚动,scroll的时候去设置iframe2的scrollTop,但是因为iframe2被设置了scrollTop,被间接的触发了scroll,然后又会去触发iframe1的scrollTop,又触发scroll事件...

解决方案也很简单,就是要排除间接触发的scroll,只接收主动触发的scroll。代码上增加一个标识,主动触发后产生标记,如果触发scroll的时候遇到这个标记,表示间接触发,不执行:

demo中可以打开控制台,看当前触发scroll的iframe。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字