Centrer un site de défilement horizontal d'une page dans le navigateur (ne pas centrer un div)

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

Sens: j'ai une horizontale, une page qui au lieu de partir de la gauche et en allant vers la droite (par exemple cette), va commencer dans le milieu, et être capable de faire défiler le contenu de la droite ET de la gauche.

Voici un visuel:

Si possible, j'aimerais éviter les dom-prêt de défilement via JavaScript ou jQuery (je l'utilise pour l'aide à la navigation et des trucs de toute façon), et n'utiliser que de la pure html5/css, ou au moins de s'orienter l'écran de pré-dom-prêt à l'aide de JavaScript/jQuery.

Deux idées de ma part:

a) de déplacer le conteneur vers la gauche par exemple, à l'aide de margin-left:-xmais qui, généralement, le coupe.

b) déplacer l'écran vers la droite depuis le début.

Hélas, j'ai été trop unsavvy pour réaliser cela sur mon propre.

p.s. voici mon jsfiddle pour des raisons de cohérence: http://jsfiddle.net/alexdot/2Dse3/

source d'informationauteur alex

8

Solution

Si vous souhaitez masquer les données, ajouter visibility:hidden; des éléments avec un contenu qui doit être caché au début. L'exécution de mes défilement des pages de code, et enfin la modification de visibility:hidden; à visibility:visible.

Ce qui va arriver?
1. CSS cache le contenu de ces éléments: visibility:hidden
2. Le chargement de la Page
3. JavaScript causes de la page pour faire défiler vers le centre: window.scrollTo(..., ...)
4. JavaScript montre le secret de contenu (en dehors de la vue du navigateur): visibility=visible
5. L'utilisateur fait défiler vers la gauche/droite, et est capable de lire le secret
Violon: http://jsfiddle.net/2Dse3/5/

Défilement code

Faites défiler la page vers le centre ne peut pas être réalisé avec de la pure CSS/HTML. Ceci ne peut être fait à l'aide de JavaScript. Pour cette raison d'être est simple, je préfère utiliser JavaScript natif de, y compris un plugin JQuery (inutile de la charge du serveur).

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 les CSS (voir Violon):
```
body {width: 500%}
#viewContainer {width: 100%}
```
Une note finale. Qu'attendez-vous lorsque l'utilisateur a désactivé JavaScript? Sont-ils autorisés à voir le contenu de la page? Si oui, ajouter ce:
```
<noscript>
  <style>
     .page{
       visibility: visible;
     }
  </style>
</noscript>
```
Sinon, ajouter <noscript>JavaScript is required to read this page</noscript>.

Facile jQuery solution

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

0

Quel est le problème avec les DOM-prêt?
```
$(function() {
    $('body').scrollLeft($('#viewContainer').width() * 2/5);
});
```
Je suis assez sûr qu'il ne peut être fait avec CSS seul.

Vous devez vous connecter pour publier un commentaire.