Question

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

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

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

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

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

Answer 1

我猜您应该使用position:absolute代替position:fixed。

.parent { overflow-y:scroll; width:100%; height:100px; }
.child { position:relative; }
.child .child-menu { position: absolute; left: 80px;width:200px; top:0px; border: 1px solid black; background-color: green; display: none; }
.child:hover .child-menu { display: block; }

小提琴演示， http://jsfiddle.net/68fBE/2/

Answer 2

我最后使用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的方法来做到这一点，但至少这是有效的。

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

2 个答案: