CSS: overflow-y: scroll; desbordamiento-x: Visible

Ver el siguiente post para un cuadro destacando mi pregunta y una posible solución:CSS: overflow-y: scroll; desbordamiento-x: Visible

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

Sin embargo, esta estrategia se rompe cuando en realidad se mueven la barra de desplazamiento. En la implementación sugerida (position: fixed;), la información sobre herramientas aparece junto a div infantil en su posición previa al desplazamiento. Por lo tanto, a medida que despliega nuevas divisiones secundarias para niños en la vista, la información sobre herramientas comienza a caer desde la parte inferior de la página.

Ver aquí para una demostración del error: http://jsfiddle.net/narcV/4/

Alguna idea de cómo puedo hacer que aparezca la información sobre herramientas al lado de la div niño en todo momento?

Fuente

2012-04-10 Chuck

Esto no es un error: 'position: fixed' siempre coloca un elemento relativo a la ventana gráfica, y no a su' posición 'relativa' contenedor más cercano. También hay algo extraño en la pregunta a la que se vincula: el título no coincide con el código dado (es * también * 'desbordamiento-y: desplazamiento; desbordamiento-x: visible'!), Y no puedo decir por qué la auto-respuesta dice usar 'position: fixed'. – BoltClock

Sí; Creo que el título de esa publicación es un error tipográfico. No estoy diciendo que la 'posición: fija;' está rota, sino que la solución en la publicación referenciada es defectuosa (porque, 'posición: fija;' se comporta exactamente como usted describe) – Chuck

que terminó la aplicación de este uso de JavaScript, utilizando la función de getPosthis question.

El producto final se parece a:

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

Básicamente, calcular en qué lugar de la página ya aparece el nodo (teniendo en cuenta la posición de la barra de desplazamiento), y coloque manualmente la información sobre herramientas en el lugar correcto en el página.

Lástima que no hay una forma elegante/CSS para hacer esto, pero al menos esto funciona.

Fuente

2012-04-11 18:19:41 Chuck

Supongo que deberías usar position:absolute en lugar de 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; }

demostración del violín, http://jsfiddle.net/68fBE/2/

Fuente

2012-04-10 06:08:43 Jashwant

Desafortunadamente, requiero que la información sobre herramientas aparezca afuera del panel principal de desplazamiento. La posición absoluta se recortará en su interior porque overflow-y está configurado para desplazarse. – Chuck

Su overflow-y es scroll. Ocultará su información sobre herramientas. Dado que scroll tiene el índice Z más alto. – Jashwant

Eso no es del todo correcto; Si miras en el JSFiddle original que publiqué, la información sobre herramientas puede aparecer delante de la barra de desplazamiento usando 'position: fixed;', pero con 'position: absolute;' está recortada dentro de la ventana gráfica, que es otro problema por completo. – Chuck

CSS: overflow-y: scroll; desbordamiento-x: Visible

Respuesta

Cuestiones relacionadas