在浏览器中将一页水平滚动站点居中（不居中 div）答案

【问题标题】：Center a one page horizontally scrolling site in browser (not centering a div)在浏览器中将一页水平滚动站点居中（不居中 div）
【发布时间】：2011-11-19 17:28:44
【问题描述】：

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

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

这是一个视觉效果：

如果可能的话，我想避免通过 JavaScript 或 jQuery 进行 dom-ready 滚动（无论如何我都将它用于导航辅助和其他东西），并且只使用纯 html5/css 或至少关注屏幕 pre-dom - 通过 JavaScript/jQuery 准备就绪。

我的两个想法：

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

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

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

附言这是我的 jsfiddle 以保持一致性：http://jsfiddle.net/alexdot/2Dse3/

【问题讨论】：

明确一点...你想要一个水平滚动的容器，但你不想使用 JavaScript 来控制滚动，只是一个水平滚动条？
不要以为有纯html5/css的解决方案。 - $("#myDiv").Focus();
哦，不。我稍后使用 javascript/jquery 来影响滚动。我不想要的是网站加载，位于左侧，加载后滚动到页面中间的实际起始区域。我想避免让用户看到为以后深入查看网站而保留的内容。
对。您希望这样，当页面加载时，查看者首先看到的是中间区域。正如我所说，在“纯 HTMl5/CSS”中无法做到
我发明了一种方法来实现您的目标：由 CSS visibility 属性和 JavaScript 组成的解决方案（请参阅下面的答案）。还要注意最后一条说明：为禁用 JavaScript 的用户提供帐号。

标签： javascript jquery html css scroll

【解决方案1】：

解决方案
如果要隐藏数据，请将visibility:hidden; 添加到具有应在开始时隐藏的内容的元素中。执行我的页面滚动代码，最后把visibility:hidden;改成visibility:visible。

会发生什么？

CSS 隐藏了这些元素的内容：visibility:hidden
页面加载
JavaScript 使页面滚动到中心：window.scrollTo(..., ...)
JavaScript 显示秘密内容（在浏览器视图之外）：visibility=visible
用户向左/向右滚动，即可读取密码

小提琴：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>。

【讨论】：

干得好。但是你可以取消大胆而大的“解决方案”！
谢谢。标题确实太明显了。我也忘了在答案的第二部分添加标题。更新了答案。
干得好！感谢 rob 的解决方案，并特别感谢您提供的非常好的和详细的答案！

【解决方案2】：

一个简单的 jQuery 解决方案

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

【讨论】：

【解决方案3】：

DOM-ready 有什么问题？

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

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

【讨论】：