CSS:溢出-y:滚动;溢出-x:可见 [英] CSS: overflow-y: scroll; overflow-x: visible

问题描述

请参阅以下帖子，以突出显示我的问题和可能的解决方案:

See the following post for a picture highlighting my question and a potential solution:

CSS溢出-y:可见，溢出-x:滚动

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

However, this strategy breaks when you actually move the scrollbar. In the suggested implementation (position: fixed;), the tooltips display next to child div in its position pre-scroll. So, as you scroll new child-divs into view, the tooltips begin falling off the bottom of the page.

有关此错误的演示，请参见此处: http://jsfiddle.net/narcV/4/

See here for a demo of the bug: http://jsfiddle.net/narcV/4/

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

Any ideas how I can make the tooltips display next to the child div at all times?

推荐答案

我最终使用最终产品如下:

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);
}

基本上，我会计算节点当前在页面上的显示位置(考虑滚动条的位置)，然后手动将工具提示放置在页面上的正确位置.

Basically, I calculate where on the page the node is currently displayed (taking into account the scrollbar position), and manually place the tooltip in the right spot on the page.

太糟糕了，没有优雅的/CSS方式可以做到这一点，但至少可以奏效.

Too bad there's no elegant/CSS way to do this, but at least this works.

这篇关于CSS:溢出-y:滚动;溢出-x:可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！