CSS:溢出-y:滚动；溢出-x:可见

Question

请参阅以下帖子以获取突出显示我的问题和可能的解决方案的图片:

CSS overflow-y:visible, overflow-x:scroll

但是，当您实际移动滚动条时，此策略会中断。在建议的实现 (position: fixed;) 中，工具提示显示在其预滚动位置的子 div 旁边。因此，当您将新的子 div 滚动到 View 中时，工具提示开始从页面底部脱落。

请在此处查看错误演示:http://jsfiddle.net/narcV/4/

有什么想法可以让工具提示始终显示在子 div 旁边吗？

Answer 1

我最终使用 javascript 实现了这个，使用了 this question 中的 getPos 函数.

最终产品看起来像:

var scrollPanel = ...;
var tooltip = ...;
function nodeHovered(e) {
   var hovered = e.srcElement;
   var pos = getPos(hovered);
   pos.x += hovered.offsetWidth;
   pos.y -= scrollPanel.scrollTop;
   tooltip.style.setProperty('left', pos.x);
   tooltip.style.setProperty('top', pos.y);
}

基本上，我计算节点当前显示在页面上的位置(考虑滚动条位置)，然后手动将工具提示放在页面上的正确位置。

太糟糕了，没有优雅/CSS 的方式来做到这一点，但至少这是可行的。