为词库增添悬浮球切换开关按钮需要注意的技术问题

lbhl

可能为数不多数量极少的MDX在屏幕上添加了悬浮球以供使用者切换各种显示模式，目前我知道的仅有朗文5++（还有其他的吗？）

最近我在给另一部词典改版加进类似悬浮球切换开关时候遇到一个问题： 这种悬浮开关定位position属性应该设置成 fixed还是absolute？
: j% Q6 i4 ~. e; M+ g2 z
" C# R) B  h) A1 t假设词典软件除了加悬浮球的词库还同时打开了其他词库。如果设置成fixed，我发现即使悬浮球词典内容显示完了，都进入其他词典相同词头的显示了，这个悬浮球还不消失。
6 j" V3 l+ n! w2 e. Q原想是词典软件显示完一部MDX的HTML就要清除它使之无效（那悬浮球自然会消失了），然后从头再渲染下一部词典的HTML呢，即每部词典的HTML之间是独立无任何关系的。结果不是这样的。等打开GOLDENDICT调试器看源码，原来GOLDENDICT把多部同时打开的词库的HTML合并成了一个HTML，可能为了避免各个词库样式名重名产生冲突，每个词库CSS的样式名还加了那个词库特定的ID的前缀（只是怀疑它是否还要修改每部词库的JS代码？修改有逻辑的JS代码可和CSS完全不同啊，绝非仅仅替换添加ID这种简单的正则操作可以弄的啊？）。原来如此，既然看成仅仅只有一个HTML文件而不是每个词库一个HTML文件，这悬浮球设置成fixed了它就永远有效，当然要永久悬浮在那，除非你关掉词典软件了。

如果换用absolute呢? 那就是相对于悬浮球最近祖先的位置了。结果可想而知，当你滚动词典内容，悬浮球也跟着滚动；如果词头内容足够多一屏无法显示全，滚动的结果就是这部词典内容还没看完呢悬浮球就已消失了，这显然不是我们要的。
5 z& J+ W2 ~& o% P/ C
再仔细查看人家朗文5++怎么实现的：当在朗文中显示中词条内容的时候，无论如何滚动屏幕，悬浮球始终位于词典软件显示窗口固定的右下角位置，此时调试器显示它position属性是 fixed的。而朗文中内容即将显示到尾部完马上就要进入下一部词典显示的时候，一个事件触发了，悬浮球的position属性由fixed变成了absolute，此时悬浮球开始跟随朗文内容的滚动而滚动，当朗文彻底消失了这个悬浮球也就彻底消失；反之亦反：如果从其他词典内容滚动进朗文，悬浮球会先是absolute，等朗文快占据整个屏悬浮球到了屏幕右下角了，某事件立即触发，absolute又变成了fixed。如此循环往复。。。。。。

1 |8 z1 M7 N0 l) |* P如何实现朗文5++的效果？如何知晓朗文5内容即将滚动出（或进）屏幕？每次滚动都会触发滚动事件，如果在滚动事件触发代码中可侦测出HTML中某元素的位置判断出临界状态到了，那就可以完成任务。问题是，具体怎么做？有点懒得看朗文5++源码，有过来人指点一下最好了。
0 k% d6 n4 o8 J2 n
0 `3 l& E8 O3 L0 b5 U谢谢你花时间看完这一堆话，无论你是否回帖，谢谢！

dfliaoyue

建议别用悬浮球。。手机平台大概率失效（手机上fixed表现比较奇怪）。PC平台没测试过朗文5++的2.x版本，不过记得在GoldenDict上1.5版本里的悬浮球是会跑到别的词典里去的。
) ]( Q0 ]$ {( h' j0 m: w7 F我觉得，读取一下词典内容的上界或下界的坐标（也就是第一个和最后一个元素相对viewport的坐标），看下正负再修改position应该就可以，绑定上相关事件即可。有思路就在网上查下能查到（我有啥需求基本都是网上查，推荐w3school的内容不错）。
另外试下position: sticky相关的内容。这个我没用过，不过觉得可能能成。
5 X3 V/ [; y' ]3 |' s' W: u2 ^# F弄成单独的展开按钮或操作即可，可以在词典头部用js动态创建一个总开关就好。

cocowind

长词条并不多，悬浮既复杂而且计算开销不划算，还不如ode那种词性跳转的好

Howard345

虽然看不太懂，还是帮顶了，感谢楼主其他帖子分享的好资源。

Lynvia

绑定事件不够香么，哈哈。

lbhl

dfliaoyue 发表于 2020-2-23 21:03
建议别用悬浮球。。手机平台大概率失效（手机上fixed表现比较奇怪）。PC平台没测试过朗文5++的2.x版本，不 ...

点击最前面的词头，音标，词性来切换是最容易想到的，但这有个缺陷：手机用户因为屏比较小能一次显示的内容少，如果查的词内容很多，如果滚屏半天查看中突然又想点击切换了，那还得花时间滚回开头词头处，的确不方便。还是固定悬浮球按钮在屏幕某处不随滚动而变化位置效果更佳。

dfliaoyue

lbhl 发表于 2020-2-25 10:12
点击最前面的词头，音标，词性来切换是最容易想到的，但这有个缺陷：手机用户因为屏比较小能一次显示的内 ...

设置单独展开设置不就行了。。L5++那种带额外语料库的总归是少数，别的内容总有办法单独整。比如中文内容，可以点击释义/例句显示；例句隐藏/展开，可以加个按钮在内容后或加在释义序号上；特殊的内容块，保留标题其它的折叠，点击展开就行。

lbhl

dfliaoyue 发表于 2020-2-25 13:39
设置单独展开设置不就行了。。L5++那种带额外语料库的总归是少数，别的内容总有办法单独整。比如中文内容 ...

词典软件中双击鼠标都解读为继续查词，程序员无法为右键单击编程，又少了个选择