Centrez un site horizontal déroulant d'une page dans le navigateur (ne centrant pas un div)

Lorsque le navigateur ouvre ma page, le navigateur devrait déjà être au centre de la page entière.

Signification: j'ai une page horizontale d'une page qui, au lieu de partir de gauche et d'aller vers la droite (par exemple, celle-ci ), commencera au milieu et pourra se défiler jusqu'au contenu à droite et à gauche.

Voici un visuel:

Entrez la description de l'image ici

Si possible, j'aimerais éviter le défilement dom-ready via JavaScript ou jQuery (je l'utilise pour l'aide à la navigation et les trucs de toute façon) et n'utilise que le pur html5 / css ou au moins la mise au point de l'écran pré-dom JavaScript / jQuery.

Deux idées de ma part:

A) en déplaçant le conteneur vers la gauche, par exemple avec la margin-left:-x , mais cela diminue habituellement.

B) déplacer l'écran vers la droite dès le début.

Hélas, j'ai été trop mécontent pour y parvenir tout seul.

Ps ici mon jsfiddle pour la cohérence: http://jsfiddle.net/alexdot/2Dse3/

Solution
Si vous souhaitez cacher des données, ajoutez de la visibility:hidden; Aux éléments avec un contenu qui doit être caché au début. Exécutez mon code de défilement de la page, puis modifiez la visibility:hidden; visibility:visible .

Qu'est-ce qui va se passer?

CSS cache le contenu de ces éléments: visibility:hidden
Les charges de la page
JavaScript fait que la page se déplace vers le centre: window.scrollTo(..., ...)
JavaScript montre le contenu secret (en dehors de la vue du navigateur): visibility=visible
L'utilisateur se déplace vers la gauche / droite et peut lire le secret

Fiddle: http://jsfiddle.net/2Dse3/5/

Code de défilement
Faire défiler la page vers le centre ne peut pas être réalisé avec un pur CSS / HTML. Cela ne peut être fait qu'en utilisant JavaScript. Pour ce simple but, je préfère utiliser le JavaScript natif, y compris un plugin JQuery (charge de serveur inutile).

Code 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. */

Vous devez ajuster le CSS (voir Fiddle ):

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

Une note finale. Qu'attendez-vous lorsque l'utilisateur a désactivé JavaScript? Est-ce qu'ils sont autorisés à voir le contenu de la page? Si oui, ajoutez ceci:

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

Sinon, ajouter <noscript>JavaScript is required to read this page</noscript> .

Une solution simple jQuery

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

Quel est le problème avec DOM-ready?

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

Je suis sûr que cela ne peut pas être fait avec CSS seul.