javascript - 显示比容器宽的文本，滚动时出现问题

Question

我有没有换行的列表元素。它们在一个列表中，该列表位于一个固定大小的 div 中，带有 overflow:hidden;overflow-y:auto 以便它能够滚动。如您所料，文本被裁剪到右侧。

我正在尝试显示当您将鼠标悬停在上方时溢出 div 的文本的“长”版本。这在很大程度上依赖于

if (0 > e.target.clientWidth - e.target.scrollWidth) {

(其中 e.target 是鼠标悬停事件中的 LI)。

这是我想要的基本原理(警告:丑陋的 hack，欢迎改进)。

http://jsfiddle.net/h3yzhby0/

但是，我坚持使用滚动。当我将鼠标悬停在该元素上时，它被添加到正文中，因为它在 z 顺序上比包装 div 更高(它在 dom 中在它之后并且有一个位置:固定) - 它出现在 div 的滚动条上方，因为我需要.当鼠标悬停在该元素上时，我希望鼠标滚轮 [和我尚未编码的键盘箭头] 继续上下滚动 div。该事件不会从鼠标悬停的 div 中“冒泡”，因为它不是同一个父节点/节点(并且不可能，因为溢出要求)。

有没有办法在特定对象上传递或重新触发鼠标滚轮事件(例如传递事件)？

Answer 1

我认为最简单的方法是添加 "pointer-events": "none"到长版元素，所以滚动不会考虑它。

然后您需要检查哪些元素需要长版本，并在 mouseenter/mouseleave 上添加/删除额外的 div.long-version。