CSS: переполнение-y: прокрутка; переполнение-x: видимое

См. следующий пост для изображения, в котором освещается мой вопрос и потенциальное решение:

Переполнение CSS-y: видимое, переполнение-x: прокрутка

Однако эта стратегия ломается, когда вы на самом деле перемещаете полосу прокрутки. В предлагаемой реализации (position: fixed;) всплывающие подсказки отображаются рядом с дочерним div в позиции предварительного прокрутки. Таким образом, когда вы прокручиваете новые дочерние div файлы в поле зрения, всплывающие подсказки начинают падать в нижней части страницы.

См. здесь для демонстрации ошибки: http://jsfiddle.net/narcV/4/

Любые идеи о том, как я могу постоянно показывать всплывающие подсказки рядом с дочерним div?

Ответ 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);
}

В принципе, я вычисляю, где на странице отображается node (с учетом позиции полосы прокрутки), и вручную поместите всплывающую подсказку в нужное место на странице.

Жаль, что для этого нет элегантного/CSS-способа, но, по крайней мере, это работает.

Ответ 2

Я думаю, вы должны использовать 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/