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

Question

Patrz poniższa wiadomość dla obrazu podkreślając moje pytanie i potencjalne rozwiązania:

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

jednak psuje to strategia, kiedy rzeczywiście przenieść pasek przewijania. W sugerowanej implementacji (position: fixed;) etykiety narzędzi wyświetlają się obok podrzędnego elementu div w jego położeniu przed przewinięciem. Kiedy przewijasz nowe elementy podrzędne, podpowiedzi zaczynają spadać z dolnej części strony.

Zobacz tutaj demo błędu: http://jsfiddle.net/narcV/4/

Wszelkie pomysły jak mogę sprawić podpowiedzi wyświetlane obok div dziecka przez cały czas?

Answer 1

skończyło się na wdrożenie tego przy użyciu javascript, używając funkcji getPos z this question.

Produkt końcowy wygląda tak:

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

Zasadniczo obliczyć gdzie na stronie jest aktualnie wyświetlany węzeł (biorąc pod uwagę stanowisko przewijania) i ręcznie umieszczać etykietkę we właściwym miejscu na strona.

Szkoda, że ​​nie ma eleganckiego/CSS sposobu, aby to zrobić, ale przynajmniej to działa.

Answer 2

Domyślam się, że powinieneś użyć position:absolute zamiast 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; } 

demo Fiddle, http://jsfiddle.net/68fBE/2/