Centrar un sitio de desplazamiento horizontal de una página en el navegador (no centrar un div)

Question

Cuando el navegador abre mi página, el navegador ya debe estar en el centro de toda la página.

Significado: Tengo una página horizontal, que en lugar de comenzar desde la izquierda y hacia la derecha (por ejemplo, this), comenzará en el medio, y podrá desplazarse al contenido tanto a la derecha como la izquierda.

Aquí es una representación visual:

Si es posible, me gustaría evitar el desplazamiento dom-listos a través de JavaScript o jQuery (lo estoy usando para la ayuda a la navegación y otras cosas de todos modos), y use solo html5/css puro o al menos enfoque la pantalla pre-dom-ready a través de JavaScript/jQuery.

dos ideas de mi parte:

un

) mover el recipiente hacia la izquierda, por ejemplo, usando margin-left:-x, pero eso generalmente lo corta.

b) moviendo la pantalla hacia la derecha desde el principio.

Por desgracia, he sido demasiado experto para lograr esto por mi cuenta.

p.s. aquí mi jsfiddle para coherencia: http://jsfiddle.net/alexdot/2Dse3/

Answer 1

Solución
Si desea ocultar los datos, añadir visibility:hidden; a los elementos con un contenido que debe mantenerse oculto en la salida. Ejecutar mi código de desplazamiento de página, y finalmente cambiar visibility:hidden; a visibility:visible.

¿Qué va a pasar?

1. CSS oculta los contenidos de estos elementos: visibility:hidden
2. carga la página de
3. JavaScript hace que la página para desplazarse hasta el centro: window.scrollTo(..., ...)
4. JavaScript muestra el contenido secreto (fuera de la vista del navegador): visibility=visible
5. el usuario se desplaza a la izquierda/derecha, y es capaz de leer el secreto

violín: http://jsfiddle.net/2Dse3/5/

---

código Desplazamiento
desplazar la página hacia el centro no se puede lograr con puro CSS/HTML. Esto solo se puede hacer usando JavaScript. Por este simple propósito, prefiero usar JavaScript nativo que incluir un plugin de JQuery (carga de servidor innecesaria).

código JavaScript:

window.scrollTo(
    (document.body.offsetWidth -document.documentElement.offsetWidth)/2, 
    (document.body.offsetHeight-document.documentElement.offsetHeight)/2 
); 
/* 
* window.scrollTo(x,y) is an efficient cross-broser function, 
* which scrolls the document to position X, Y 
* document.body.offsetWidth contains the value of the body's width 
* document.documentElement contains the value of the document's width 
* 
* Logic: If you want to center the page, you have to substract 
* the body's width from the document's width, then divide it 
* by 2. 
*/ 

Hay que ajustar el CSS (ver Fiddle):

body {width: 500%} 
#viewContainer {width: 100%} 

Una nota final. ¿Qué esperas cuando el usuario ha deshabilitado JavaScript? ¿Pueden ver el contenido de la página? En caso afirmativo, agregue esto:

<noscript> 
    <style> 
    .page{ 
     visibility: visible; 
    } 
    </style> 
</noscript> 

De lo contrario, agregue <noscript>JavaScript is required to read this page</noscript>.

Answer 2

¿Qué pasa con DOM-ready?

$(function() { 
    $('body').scrollLeft($('#viewContainer').width() * 2/5); 
}); 

I'm pretty sure it can't be done with CSS alone.

Answer 3

Una solución fácil jQuery

$(function() { 
    scrollTo(($(document).width() - $(window).width())/2, 0); 
});