CSS: hacer overflow-x: ¿oculto de verdad?

Tengo un div con un estilo con overflow-x: hidden , pero encuentro que cuando hay un div más amplio dentro que contiene texto, el usuario todavía puede arrastrar de lado con el mouse para ver el texto oculto.

Me gustaría evitar eso y hacer que el texto sea realmente oculto. Este jsfiddle debería mostrar lo que quiero decir: http://jsfiddle.net/YzsGF/11/ o aquí está el código:

 
How can I truly hide the text beyond the margin?
#outer { width: 150px; height: 300px; overflow-x: hidden; border: 1px solid black; } #inner { width: 300px; overflow-x: hidden; }

¿Hay alguna manera de evitar que el usuario pueda ver el texto oculto?

ACTUALIZACIÓN: Necesito overflow-y para trabajar: está bien que overflow-x sea solo CSS3. Puede ayudar a explicar el escenario de la vida real:

  • Tengo una división interna de un ancho fijo pero de longitud desconocida.
  • Cuando es lo suficientemente corto para caber en el div exterior sin una barra de desplazamiento en y, todo está bien.
  • Cuando el div interior se vuelve lo suficientemente largo como para que el div exterior necesite una barra de desplazamiento y, aparece uno, pero corta parte del contenido de la derecha del div interior. Eso también está bien (dejé algo de relleno de RH deliberadamente), pero lo que no está bien es que el usuario pueda seleccionar el texto y arrastrarlo hacia los lados, revelando el relleno de RH vacío y ocultando parte del texto en el lado izquierdo.

¿Alguna solución?

Podrías usar la propiedad del clip CSS. Esto recortará el texto como se desee al no mostrar nada más allá del rectángulo de recorte, y también evitará que el usuario se desplace.

 #inner { position:absolute; clip:rect(0px,150px,150px,0px); width: 300px; } 

Ejemplo:

http://jsfiddle.net/DigitalBiscuits/YzsGF/18/

Nota: debe especificar un posicionamiento absoluto para que la propiedad del clip funcione.

Más información aquí: http://www.w3schools.com/cssref/pr_pos_clip.asp

overflow-x: hidden , a diferencia de overflow: hidden no desactiva el desplazamiento. Simplemente hace que el contenido se recorte y oculte la barra de desplazamiento. El elemento en sí todavía es desplazable a través de javascript o, como ha descubierto en algunos escenarios de selección donde el elemento se desplaza automáticamente.

No hay una solución que no sea javascript, y javascript todavía está desordenado porque onscroll no se activa si la barra de desplazamiento no está visible (es decir, el evento onscroll está vinculado a la posición de cambio de la barra de desplazamiento, no al desplazamiento real del elemento).

Hay varias soluciones La solución de colocación de overflow:hidden Andrew Dunn overflow:hidden en una envoltura, y la configuración de la envoltura al ancho de su contenedor es una. Pero eso simplemente resuelve el problema, no soluciona el problema real. Pero si estás de acuerdo con eso, entonces probablemente sea una buena opción. Tenga en cuenta que debe aplicar esta técnica a todos los elementos dentro del contenedor, o puede terminar con el mismo problema.

No estoy seguro de si necesita que el eje y de la división interna sea desplazable, pero si no lo hace, esto debería satisfacer sus necesidades:

 #outer { width: 150px; height: 300px; overflow-x: hidden; border: 1px solid black; } #inner { overflow: hidden; width: 100%; }​ 

Parece como si overflow y overflow-x se comportan de manera diferente entre sí. http://jsfiddle.net/G3T9w/5/

Suponiendo que el código HTML simplificado es:

 
content...

Establecer ambos cuerpo, html a la altura: 100%;

 body, html {height:100%;} 

Coloca un div en el cuerpo y configúralo para que se extienda por toda la altura del cuerpo:

 div.wrap {height:100%; overflow:hidden;} 

Esto evitará que la ventana se desplace de formas extrañas, como presionar la rueda del mouse y moverla, usar anclajes, etc.

Para eliminar la barra de desplazamiento (visualmente), también debe agregar:

 body {overflow: hidden; } 

Para deshabilitar el desplazamiento presionando las teclas de flecha en el teclado:

 window.addEventListener("keydown", function(e) { // space, page up, page down and arrow keys: if([32, 33, 34, 37, 38, 39, 40].indexOf(e.keyCode) > -1) { e.preventDefault(); } }, false); 

La respuesta más sencilla que me funciona es agregar la position: fixed; estilo CSS position: fixed; a la etiqueta .