TA的每日心情 | 衰
2019-9-23 23:38 |
|---|
签到天数: 8 天 [LV.3]偶尔看看II
禁止发言
- 积分
- 47766
|
本帖最后由 lbhl 于 2020-2-23 19:16 编辑
可能为数不多数量极少的MDX在屏幕上添加了悬浮球以供使用者切换各种显示模式，目前我知道的仅有朗文5++（还有其他的吗？）
最近我在给另一部词典改版加进类似悬浮球切换开关时候遇到一个问题： 这种悬浮开关定位position属性应该设置成 fixed还是absolute？
假设词典软件除了加悬浮球的词库还同时打开了其他词库。如果设置成fixed，我发现即使悬浮球词典内容显示完了，都进入其他词典相同词头的显示了，这个悬浮球还不消失。
原想是词典软件显示完一部MDX的HTML就要清除它使之无效（那悬浮球自然会消失了），然后从头再渲染下一部词典的HTML呢，即每部词典的HTML之间是独立无任何关系的。结果不是这样的。等打开GOLDENDICT调试器看源码，原来GOLDENDICT把多部同时打开的词库的HTML合并成了一个HTML，可能为了避免各个词库样式名重名产生冲突，每个词库CSS的样式名还加了那个词库特定的ID的前缀（只是怀疑它是否还要修改每部词库的JS代码？修改有逻辑的JS代码可和CSS完全不同啊，绝非仅仅替换添加ID这种简单的正则操作可以弄的啊？）。原来如此，既然看成仅仅只有一个HTML文件而不是每个词库一个HTML文件，这悬浮球设置成fixed了它就永远有效，当然要永久悬浮在那，除非你关掉词典软件了。
如果换用absolute呢? 那就是相对于悬浮球最近祖先的位置了。结果可想而知，当你滚动词典内容，悬浮球也跟着滚动；如果词头内容足够多一屏无法显示全，滚动的结果就是这部词典内容还没看完呢悬浮球就已消失了，这显然不是我们要的。
再仔细查看人家朗文5++怎么实现的：当在朗文中显示中词条内容的时候，无论如何滚动屏幕，悬浮球始终位于词典软件显示窗口固定的右下角位置，此时调试器显示它position属性是 fixed的。而朗文中内容即将显示到尾部完马上就要进入下一部词典显示的时候，一个事件触发了，悬浮球的position属性由fixed变成了absolute，此时悬浮球开始跟随朗文内容的滚动而滚动，当朗文彻底消失了这个悬浮球也就彻底消失；反之亦反：如果从其他词典内容滚动进朗文，悬浮球会先是absolute，等朗文快占据整个屏悬浮球到了屏幕右下角了，某事件立即触发，absolute又变成了fixed。如此循环往复。。。。。。
如何实现朗文5++的效果？如何知晓朗文5内容即将滚动出（或进）屏幕？每次滚动都会触发滚动事件，如果在滚动事件触发代码中可侦测出HTML中某元素的位置判断出临界状态到了，那就可以完成任务。问题是，具体怎么做？有点懒得看朗文5++源码，有过来人指点一下最好了。
谢谢你花时间看完这一堆话，无论你是否回帖，谢谢！
|
|
发表于 2020-2-23 19:12:17
楼主