Ocultar barra de desplazamiento en div

Hola entusiastas de la web en ciernes. Me temo que estoy en un buen aprieto y necesito ayuda. En un proyecto web actual, encontré una pared agria. Este es el código. Echar un vistazo. Del código, hace exactamente lo que quiero. Pero aquí está el problema . Hay barras de desplazamiento en el div. No quiero ninguna barra de desplazamiento en mis divs. Intenté desbordamiento-y: scroll; y se deshizo de la barra de desplazamiento horizontal, pero la barra de desplazamiento vertical todavía está allí. Intenté mucho y lo busqué, pero fue en vano. ¿Cómo puedo deshacerme de las barras de desplazamiento verticales y horizontales en mis divs con esto todavía bien capaz de desplazarse?

editar: también necesito que sea un navegador cruzado. no solo Chrome.

HTML

CSS

 body { overflow:hidden; } #content, html, body { height: 100%; width:100%; margin:0; padding:0; } #left { float: left; width: 50%; background: red; height: 100%; overflow: scroll; } #right { float: left; width: 50%; background: blue; height: 100%; overflow: scroll; } 

Yo usaría esta técnica:

 #parent{ height: 100%; width: 100%; overflow: hidden; } #child{ width: 100%; height: 100%; overflow: auto; padding-right: 15px; /* Increase this value for cross-browser compatibility */ } 

Aquí hay un violín que funciona: http://jsfiddle.net/5GCsJ/954/

Aquí hay una manera de hacerlo: HTML

 

CSS

 body { overflow:hidden; } #content, html, body { height: 100%; width:100%; margin:0; padding:0; } #left { float: left; width: 50%; background: red; height: 100%; overflow: hidden; } .richyPhoto { width: 100%; height: 99%; border: 1px solid red; overflow: auto; padding-right: 15px; } #right { float: left; width: 50%; background: blue; height: 100%; overflow: hidden; } .richyPhoto2 { width: 100%; height: 99%; border: 1px solid blue; overflow: auto; padding-right: 15px; } 

Enlace de violín de trabajo: sin scrollbars scroll