在浏览器中居中一页水平滚动网站（不以div为中心）

Question

当浏览器打开我的页面时，浏览器应该已经位于整个页面的中心。

含义：我有一个水平的单页，而不是从左边开始到右边（例如this），将从中间开始，并能够滚动到两个内容右边和左边。

这是一个视觉效果：

如果可能的话，我想避免通过JavaScript或jQuery进行dom-ready滚动（我将它用于导航辅助和东西），并且只使用纯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

简单的jQuery解决方案

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

Answer 3

DOM-ready有什么问题？

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

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