CSS: Überlauf-y: scroll; Überlauf-x: sichtbar

Question

Siehe folgenden Beitrag für ein Bild meiner Frage und eine mögliche Lösung hervorheben:

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

Doch diese Strategie bricht, wenn Sie tatsächlich die Scrollbar bewegen. In der vorgeschlagenen Implementierung (position: fixed;) werden die Tooltips neben dem Child-Div in seiner Position Pre-Scroll angezeigt. Wenn Sie also neue Child-Divs in die Ansicht scrollen, beginnen die Tooltips vom unteren Rand der Seite zu fallen.

Sehen Sie hier für eine Demo des Fehlers: http://jsfiddle.net/narcV/4/

Irgendwelche Ideen, wie ich die Tooltips jederzeit angezeigt werden neben dem Kind div machen kann?

Answer 1

ich diese mit Hilfe von Javascript Implementierung up, von this question die getPos Funktion.

Das Endprodukt sieht so aus:

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

Grundsätzlich ich berechnen, wo auf der Seite der Knoten zur Zeit (unter Berücksichtigung der Scrollbar Position) angezeigt wird, und legen Sie manuell den Tooltip an der richtigen Stelle auf der Seite.

Schade, es gibt keine elegante/CSS-Möglichkeit, dies zu tun, aber zumindest funktioniert das.

Answer 2

Ich denke, Sie sollten position:absolute statt position:fixed verwenden.

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

Fiddle Demo endete http://jsfiddle.net/68fBE/2/