¿Es esto posible sin usar javascript?

Hice una interfaz de usuario web simple con JSFiddle y me pregunto si se puede hacer la misma interfaz de usuario sin usar JavaScript .

Un violín dice más de 1000 palabras.

Entonces la pregunta es (porque no parece claro para algunas personas): ¿cómo puedo lograr los mismos resultados sin usar ningún JavaScript?

PD: No quiero usar JavaScript para volver a calcular la posición en cada evento de desplazamiento porque el reposicionamiento en IE no es lo suficientemente fluido.

HTML:

B
This stays fixed when scrolling horizontally, but scrolls along when scrolling down the parent.

CSS:

 .A { background-color: yellow; height: 400px; width: 700px; overflow:scroll; position: relative; } .B { background-color: green; height: 1000px; width: 1500px; position: absolute; top:0; color:white; } .C { background-color: red; position: absolute; left: 100px; top: 0px; height: 1000px; width: 100px; } 

JS (con jQuery):

 $('.A').scroll(function(e) { $('.C').css('left', e.target.scrollLeft + 100); }); 

Cuando suficientes navegadores lo admitan, podrá usar el nuevo valor de posición sticky :

 .C { position: sticky; position: -webkit-sticky; left: 100px; top: auto; /* Default value */ } 

http://jsfiddle.net/5z3nLqq5/12/

He jugado con tu muestra (solo CSS) y la puse en un estado donde CASI estaba en lo cierto pero no lo suficientemente cerca. Sin embargo, dado que estás diciendo que no es lo suficientemente fluido en IE, quiero sugerirte esto:

 var $cRef = $('.C'); $('.A').scroll(function(e) { $cRef.css('left', e.target.scrollLeft + 100); }); 

El mayor problema con IE no es que los cálculos sean mucho más lentos, sino que las consultas dom pueden ser terriblemente lentas según la versión que sea. Los elementos de caché dom pueden marcar una gran diferencia.

PD: Sí, sé que estás buscando una solución que no sea JS. Pero otorgarle a su razonamiento esta secuencia de comandos podría resolver su problema, en lugar de no tener solución al final, porque podría ser difícil obtener una solución de navegador cruzado que funcione en todas las plataformas.

Agregué otro contenedor al código HTML, así:

 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
This stays fixed when scrolling horizontally, but scrolls along when scrolling down the parent.

Luego, agregó un poco de estilo a la clase de contenedor

 .container { background-color: green; height: 400px; width: 700px; position: absolute; top:0; overflow-x:hidden; overflow-y:scroll; } 

E hizo algunos cambios en las clases A y C. Sé que NO es el resultado que queremos , pero es similar a esto: aquí está el violín http://jsfiddle.net/gnfwg08c/

Parece funcionar:

JsFiddle

Se agregó un contenedor para B que tenía el ancho de A pero la altura de B Funciona si no le molesta la barra de desplazamiento horizontal en la parte inferior de B (que puede ocultar usando webkit-scrollbar : JsFiddle ): /