CSS: overflow-y:滚动；overflow-x:可见

Question

请参阅以下帖子，以获取突出显示我的问题和潜在解决方案的图片：

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

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

在这里可以看到这个bug的演示：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方法可以做到这一点，但至少这是有效的。