Desplazarse sin una barra de desplazamiento
Formulario de muestra:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {font:13px arial; color:white;}
body {background:black;}
label {display:inline-block; width:50px;}
input, textarea {margin:0; border:1px solid red; padding:0; background:green;}
textarea {width:300px; height:100px;}
</style>
</head>
<body>
<form action="#">
<div><label for="entry_0">Name</label><input type="text" id="entry_0"></div>
<div><label for="entry_1">Email</label><input type="text" id="entry_1"></div>
<div><label for="entry_2">URL</label><input type="text" id="entry_2"></div>
<div id="parent"><textarea id="entry_3"></textarea></div>
<div><input type="submit" value="Submit"></div>
</form>
</body>
</html>
Me gustaría eliminar / ocultar la barra de desplazamiento de área de texto, ya que no coincide con mi estilo de formulario. Sé que puedo usar los complementos de jQuery para diseñar la barra de desplazamiento, pero no funcionan de manera confiable en diferentes navegadores / sistemas. Para ocultar la barra de desplazamiento puedo usartextarea {width:300px; height:100px; overflow:hidden;}, pero detiene completamente el desplazamiento de Firefox a través del mouse y el teclado. También probé la siguiente solución:
#parent {width:284px; height:102px; overflow:hidden;}
textarea {width:300px; height:100px; overflow-x:hidden; overflow-y:scroll;}
Debería funcionar con precisión si agrego algún script para calcular el ancho de la división principal:
var textareaWidth = document.getElementById('entry_3').scrollWidth;
document.getElementById('parent').style.width = textareaWidth + 'px';
Pero de todos modos, el enfoque anterior no parece funcionar en Chrome / Safari.
Manifestación:http://jsfiddle.net/RainLover/snTaP/
Abra la demostración anterior en Chrome / Safari >> inserte texto en el área de texto >> resalte / seleccione una línea y arrastre el mouse hacia la derecha y verá la barra de desplazamiento. O usa las teclas del tecladoPage Up yPage Down.
¿Alguna corrección u otras soluciones?