CSS:overflow-y:scroll; overflow-x:可见

Question

有关突出显示我的问题和潜在解决方案的图片,请参阅以下帖子:

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

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

请参阅此处以获取该错误的演示:http://jsfiddle.net/narcV/4/

任何想法我如何使工具提示始终显示在子div旁边？

Answer 1

我最终使用 javascript 实现了这个问题，使用了这个问题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 方法来做到这一点，但至少这是可行的。