Center a one page horizontally scrolling site in b

问题:

When the browser opens up my page, the browser should already be in the center of the whole page.

Meaning: I have a horizontal one-page, which instead of starting from the left and going to the right (e.g. this), will start in the middle, and be able to scroll to the content on both the right AND the left.

Here is a visual:

If possible, I'd like to avoid dom-ready scrolling via JavaScript or jQuery (I'm using it for navigational aid and stuff anyways), and use only pure html5/css or at least focusing the screen pre-dom-ready through JavaScript/jQuery.

Two ideas on my part:

a) moving the container to the left e.g. using margin-left:-x, but that usually cuts it off.

b) moving the screen to the right from the start.

Alas, I have been too unsavvy to achieve this on my own.

p.s. here my jsfiddle for consistency: http://jsfiddle.net/alexdot/2Dse3/

回答1:

Solution
If you want to hide data, add visibility:hidden; to the elements with a content which should be kept hidden at the start. Execute my page scrolling code, and finally change visibility:hidden; to visibility:visible.

What's going to happen?

1. CSS hides the contents of these elements: visibility:hidden
2. The Page loads
3. JavaScript causes the page to scroll to the center: window.scrollTo(..., ...)
4. JavaScript shows the secret content (outside the view of the browser): visibility=visible
5. The user scrolls to the left/right, and is able to read the secret

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

---

Scrolling code
Scrolling the page to the center cannot be achieved with pure CSS/HTML. This can only be done by using JavaScript. For this simple purpose, I'd rather use native JavaScript than including a JQuery plugin (unnecessary server load).

JavaScript code:

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

You have to adjust the CSS (see Fiddle):

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

A final note. What do you expect when the user has disabled JavaScript? Are they allowed to see the contents of the page? If yes, add this:

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

Otherwise, add <noscript>JavaScript is required to read this page</noscript>.

回答2:

An easy jQuery solution

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

回答3:

What's wrong with DOM-ready?

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

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