CSS：溢出-y：滚动；溢出-x：可见答案

【问题标题】：CSS: overflow-y: scroll; overflow-x: visibleCSS：溢出-y：滚动；溢出-x：可见
【发布时间】：2013-03-19 15:38:35
【问题描述】：

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

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

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

查看这里的错误演示：http://jsfiddle.net/narcV/4/

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

【问题讨论】：

这不是错误：position: fixed 总是相对于视口定位元素，而不是与其最近的position: relative 容器。您链接到的问题也有些奇怪：标题与给定代码不符（也 overflow-y: scroll; overflow-x: visible！），我不知道为什么自我回答说使用position: fixed。
是的；我认为那个帖子的标题是一个错字。我不是说position: fixed; 坏了，而是引用帖子中的解决方案有问题（因为position: fixed; 的行为与您描述的完全一样）

标签： css overflow

【解决方案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 方法可以做到这一点，但至少这是可行的。

【讨论】：