¿Cómo hacer para que el scroll se posicione siempre en el centro de la web?

oscar3987 · #1 (**permalink**) 22/10/2012, 19:07

Hola amigos, creo que este tema ya ha sido visto, pero les agradecería la ayuda. Tengo una página en la cual el div de fondo es de 1300 px. Están centrados los margenes y en páginas que superan esta resolución no hay problema, la página siempre está centrada. Pero en páginas que son menores a este tamaño, el scroll aparece y se posiciona en el lado izquierdo. Mi pregunta es ¿CÓMO HACER PARA QUE EL SCROLL SE POSICIONE EN EL CENTRO SIEMPRE?...de esta forma mi web siempre aparecería en el centro.

Gracias!

emprear · #2 (**permalink**) 23/10/2012, 07:58

No lo veo muy práctico. pero necesitarías de javascript, algo asi

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>scrollLeft</title>
 
<style type="text/css">
/*<![CDATA[*/
div#capa{
width:1300px;
height: 1500px;
text-align: center;
background-color:lime;
margin:0 auto;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var anchoDelDiv = 1300;
function posicionarScroll(){
var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth;
if(x <= anchoDelDiv){
var margen = anchoDelDiv-x;
var z = margen/2;
var vscroll = (document.all ? document.scrollTop : window.pageYOffset);
window.scrollTo(z,vscroll);
}
}
window.onload = posicionarScroll;
window.onresize = posicionarScroll;
//]]>
</script>
</head>
<body>
<div id="capa">texto</div>
</body>
</html>

Solo tenés que modificar el ancho del div en la variable y el css. También funcionara si redimensionan la página.

Pero eso es la teoría, en la práctica yo no haría semejante cosa
Saludos

oscar3987 · #3 (**permalink**) 24/10/2012, 14:33

Muchas Gracias, el código funciona al 100 x 100. Yo tampoco aplicaría esto en una web, pero me está sacando de una emergencia que tengo.

GRACIAS!