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