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

Question

请查看以下帖子，其中有一张图片突出显示我的问题和潜在解决方案： CSS overflow-y:visible, overflow-x:scroll 然而，当您实际移动滚动条时，这种策略会失败。在建议的实现中（position:fixed;），工具提示显示在其位置预滚动的子div旁边。因此，当您滚动新的子div进入视图时，工具提示开始从页面底部掉落。

点击此处查看演示错误：http://jsfiddle.net/narcV/4/ 有什么想法可以使工具提示始终显示在子div旁边？

- Chuck

---

这不是一个错误：position: fixed 总是将元素相对于视口定位，而不是其最近的 position: relative 容器。你链接的问题也有些奇怪：标题与给定的代码不符（它还是 overflow-y: scroll; overflow-x: visible！），我无法理解为什么自答要使用 position: fixed。 - BoltClock

是的，我认为那篇文章的标题有错别字。我并不是说 position: fixed; 是有问题的，而是参考文章中的解决方案有缺陷（因为 position: fixed; 的行为正如你所描述的那样）。 - Chuck

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 的方法来做到这一点，但至少这样可以工作。

- Chuck