javascript - 在浏览器中将一页水平滚动的站点居中(而不是将 div 居中)

Question

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

含义:我有一个水平的一页，它不是从左边开始然后向右移动(例如 this )，而是从中间开始，并且能够滚动到右边的内容和左边。

这是一个视觉效果:

如果可能的话，我想避免通过 JavaScript 或 jQuery 进行 dom 就绪滚动(我将它用于导航辅助和其他东西)，并且仅使用纯 html5/css 或至少将屏幕聚焦在 dom 之前- 通过 JavaScript/jQuery 就绪。

我的两个想法:

a) 将容器向左移动，例如使用 margin-left:-x，但这通常会切断它。

b) 从开始向右移动屏幕。

唉，我太笨了，无法靠自己的力量做到这一点。

附注为了保持一致性，我的 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 显示 secret 内容(在浏览器 View 之外):visibility=visible
5. 用户向左/向右滚动，并且能够读取 secret

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