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

Question

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

含义:我有一个水平的单页,而不是从左边开始向右(例如这个),将从中间开始,并能够滚动到右侧和左侧的内容.

这是一个视觉:

如果可能的话,我想避免通过JavaScript或jQuery进行dom-ready滚动(我正在使用它进行导航辅助和东西),并且只使用纯html5/css或者至少将屏幕重点放在预先准备好的屏幕上的JavaScript/jQuery的.

我的两个想法:

a)将容器向左移动,例如使用margin-left:-x,但通常将其切断.

b)从一开始就将屏幕向右移动.

唉,我自己太不自然了.

ps这里我的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(见小提琴):

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

最后一点.当用户禁用JavaScript时,您期望什么？他们是否可以看到页面内容？如果是,请添加以下内容:

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

否则,添加<noscript>JavaScript is required to read this page</noscript>.