之前曾尝试对 impressjs 和 introjs 进行整合,不过很不幸,整合后存在很多问题。
一个主要的问题是两者都重度使用了 transform 属性,造成很多冲突。最近浏览了一下 introjs 的 github 主页,在它的 issue 页面上,我尝试搜索了一下 transform 相关的 issue,果然有不少相关的帖子在说这个问题。
其中还有一位 fork 了这个项目的人提了一个 PR,说修复了 transform 的冲突,我看了下他的描述,感觉挺符合我目前碰到的情况。
不过他也改动了不少代码,包括 css 方面,原作者暂时也没有接受他的 PR 的合并。
于是去到他 fork 的分支下下载了他那个版本的 introjs 下来,试了下,发现还是有问题,不过原页面至少没有移动了。
不过被遮罩元素的位置还是没有算准确,导致偏离了遮罩框,文字跑到左边去了。另外在发生缩放时位置也还会偏移。
总之还是算有一点点改进吧,以后再看看计算的问题。
另外,原来那些 tip 框中的 button 都是显示英文,也顺便改成了中文;最后还设置了 introjs 中的一个 scrollToElement 属性,也避免了在后面几条 step 中页面发生偏移的情况。
总之也还不算是很好,不过跟之前类似,既然弄了,就先这样了,以后再看看能否进一步改进。具体参见: