CSS: overflow-y: scroll; di overflow-x: visibile

Question

Vedere il seguente post per una foto mettendo in evidenza la mia domanda e una possibile soluzione:

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

Tuttavia, questa strategia si rompe quando effettivamente si muovono la barra di scorrimento. Nell'implementazione suggerita (position: fixed;), i tooltip vengono visualizzati accanto al div figlio nella sua posizione di pre-scorrimento. Quindi, mentre si visualizzano i nuovi div in-child, i tooltip iniziano a cadere dalla parte inferiore della pagina.

Vedi qui per una demo del bug: http://jsfiddle.net/narcV/4/

Tutte le idee come posso fare il tooltip visualizzare accanto al div bambino in ogni momento?

Answer 1

ho finito per l'attuazione del presente utilizzando JavaScript, utilizzando la funzione di getPos da this question.

Il prodotto finale si presenta come:

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

Fondamentalmente, io calcolare dove sulla pagina attualmente visualizzata nel nodo (tenendo conto della posizione di barra di scorrimento), e posizionare manualmente il tooltip nel posto giusto sul pagina.

Peccato che non ci sia un modo elegante/CSS per farlo, ma almeno questo funziona.

Answer 2

Immagino che dovresti usare position:absolute invece di 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; } 

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