在瀏覽器中居中一頁水平滾動網站（不居中div）

Question

當瀏覽器打開我的頁面時，瀏覽器應該已經位於整個頁面的中心。

含義：我有一個水平的單頁面，而不是從左邊開始並且向右邊（例如this），將從中間開始，並且能夠滾動到右側和右側的內容左邊。

這裏是一個可視化：

如果可能的話，我想，以避免通過JavaScript或jQuery的DOM就緒滾動（我用它來導航設備和東西反正），和只使用純html5/css，或者至少通過JavaScript/jQuery調整屏幕準備就緒。

我的兩個想法：

a）將容器移動到左邊，例如，使用margin-left:-x，但通常會將其切斷。

b）從一開始就將屏幕向右移動。

唉，我一直不太明白要自己做到這一點。

p.s.這裏我的jsfiddle的一致性：http://jsfiddle.net/alexdot/2Dse3/

Answer 1

解決方案
如果你想隱藏的數據，新增visibility:hidden;與應保持隱藏在開始內容的元素。執行我的頁面滾動代碼，最後將visibility:hidden;更改爲visibility:visible。

會發生什麼？

1. CSS隱藏了這些元素的內容：visibility:hidden
2. 頁面加載
3. 的JavaScript導致頁面滾動到中心：window.scrollTo(..., ...)
4. 的JavaScript顯示機密內容（瀏覽器的視野之外）：visibility=visible
5. 用戶滾動到左/右，並且能夠讀取祕密

小提琴：http://jsfiddle.net/2Dse3/5/

---

滾動碼
滾動頁面的中心不能用純CSS/HTML來實現。這隻能通過使用JavaScript來完成。爲了這個簡單的目的，我寧願使用本地JavaScript而不是包含JQuery插件（不必要的服務器負載）。

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

你必須調整CSS（見Fiddle）：

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

最後要注意的。當用戶禁用JavaScript時你期望什麼？他們是否被允許查看網頁的內容？如果是，請加上：

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

否則，請加<noscript>JavaScript is required to read this page</noscript>。

Answer 2

什麼是DOM準備好了嗎？

​​

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

Answer 3

一個簡單的jQuery解決方案

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