Sin scroll en IE

David82 · #1 (**permalink**) 03/11/2008, 09:33

Hola a todos!
Estoy desarrolando un sitio web y en firefox se puede hacer scroll con el ratón o los cursores, aunque no se me muestra la barra de scroll, pero para IE además de no mostrarse la barra, no se mueve la página.

Alguien sabe como solucionarlo???

Gracias!

ssclamp · #2 (**permalink**) 03/11/2008, 19:36

No hace mucho necesité algo parecido para una aplicación y lo solucioné con el siguiente código.

No cabe duda que tendrás que adaptarlo a tus medidas, aunque este prototipo tiene medidas líquidas y se adapta a diferentes resoluciones.

Funciona en ie6, ie7, los dos firefox, opera y chromium.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Permite la navegación con botón scroll y flechas teclado con overflow oculto</title>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}
#myid {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 108%;
	overflow: hidden;
	height: 1000px;
}
#subid {
	overflow-y: auto;
	overflow-x: hidden;
	height: 100%;
	width: 102%;
	background-color: #ccc;
}		
#contenido {
	overflow: hidden;
	background-color: #ccc;
	height: 3400px;
	width: 94%;
	text-align: center;
	margin-left: -1.6%;
}
</style>
<!--[if lte IE 7]>
<style>
#contenido {
	padding-top: 15px;
}
</style>
<![endif]-->
</head>

<body>

<div id="myid">
	<div id="subid">
		<div id="contenido">
		<p>PRIMERA LINEA</p>
		<p>Permite la navegación con botón scroll y flechas de teclado con overflow oculto</p>
		<p>Funciona en ie6, ie7, firefox2, firefox3, opera y chromium: mover el contenido con la rueda del ratón o con las flechas del teclado</p>
		<br />-<br />1<br />-<br />2<br />-<br />3<br />-<br />4<br />-<br />
		<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />
		<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />
		<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />
		<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />
		<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />
		<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />
		<p>CENTRO</p>
		<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />
		<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />
		<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />
		<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />
		<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />
		<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />50<br />-<br />
		<br />-<br />.<br />-<br />.<br />-<br />.<br />-<br />100<br />-<br />
		<p>ULTIMA LINEA</p>
		</div>
	</div>
</div>
</body>

</html>

David82 · #3 (**permalink**) 04/11/2008, 02:12

Muchas gracias ssclamp! Ahora mismo lo pruebo.