javascript 在浏览器中将一页水平滚动的站点居中（而不是将 div 居中）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7462611/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center a one page horizontally scrolling site in browser (not centering a div)
提问by alex
When the browser opens up my page, the browser should already be in the center of the whole page.
当浏览器打开我的页面时，浏览器应该已经在整个页面的中心。
Meaning: I have a horizontal one-page, which instead of starting from the left and going to the right (e.g. this), will start in the middle, and be able to scroll to the content on both the right AND the left.
含义：我有一个水平的一页，它不是从左边开始向右移动（例如this），而是从中间开始，并且能够滚动到左右两边的内容。
Here is a visual:
这是一个视觉效果：
If possible, I'd like to avoid dom-ready scrolling via JavaScript or jQuery (I'm using it for navigational aid and stuff anyways), and use only pure html5/css or at least focusing the screen pre-dom-ready through JavaScript/jQuery.
如果可能的话，我想避免通过 JavaScript 或 jQuery 进行 dom-ready 滚动（无论如何我都将它用于导航辅助和其他内容），并且只使用纯 html5/css 或至少将屏幕预 dom-ready 通过JavaScript/jQuery。
Two ideas on my part:
我的两个想法：
a) moving the container to the left e.g. using margin-left:-x, but that usually cuts it off.
a) 将容器向左移动，例如使用margin-left:-x，但这通常会切断它。
b) moving the screen to the right from the start.
b) 从一开始就向右移动屏幕。
Alas, I have been too unsavvy to achieve this on my own.
唉，我太不精明了，无法独自实现这一目标。
p.s. here my jsfiddle for consistency: http://jsfiddle.net/alexdot/2Dse3/
ps 这里我的 jsfiddle 保持一致性：http: //jsfiddle.net/alexdot/2Dse3/
采纳答案by Rob W
Solution
If you want to hide data, add visibility:hidden;to the elements with a content which should be kept hidden at the start. Execute my page scrolling code, and finally change visibility:hidden;to visibility:visible.
解决方案
如果您想隐藏数据，visibility:hidden;请在元素中添加应在开始时保持隐藏的内容。执行我的页面滚动代码，最后visibility:hidden;改为visibility:visible.
What's going to happen?
会发生什么？
- CSS hides the contents of these elements:
visibility:hidden - The Page loads
- JavaScript causes the page to scroll to the center:
window.scrollTo(..., ...) - JavaScript shows the secret content (outside the view of the browser):
visibility=visible - The user scrolls to the left/right, and is able to read the secret
- CSS 隐藏了这些元素的内容：
visibility:hidden - 页面加载
- JavaScript 使页面滚动到中心：
window.scrollTo(..., ...) - JavaScript 显示秘密内容（在浏览器视图之外）：
visibility=visible - 用户向左/向右滚动，并且能够阅读秘密
Fiddle: http://jsfiddle.net/2Dse3/5/
小提琴：http: //jsfiddle.net/2Dse3/5/
Scrolling code
Scrolling the page to the center cannot be achieved with pure CSS/HTML. This can only be done by using JavaScript. For this simple purpose, I'd rather use native JavaScript than including a JQuery plugin (unnecessary server load).
滚动代码
使用纯 CSS/HTML 无法实现将页面滚动到中心。这只能通过使用 JavaScript 来完成。为了这个简单的目的，我宁愿使用原生 JavaScript 而不是包含 JQuery 插件（不必要的服务器负载）。
JavaScript code:
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.
*/
You have to adjust the CSS (see Fiddle):
您必须调整 CSS（请参阅Fiddle）：
body {width: 500%}
#viewContainer {width: 100%}
A final note. What do you expect when the user has disabled JavaScript? Are they allowed to see the contents of the page? If yes, add this:
最后一点。当用户禁用 JavaScript 时，您期望什么？他们可以看到页面的内容吗？如果是，请添加以下内容：
<noscript>
<style>
.page{
visibility: visible;
}
</style>
</noscript>
Otherwise, add <noscript>JavaScript is required to read this page</noscript>.
否则，添加<noscript>JavaScript is required to read this page</noscript>.
回答by Bassem
An easy jQuery solution
一个简单的 jQuery 解决方案
$(function () {
scrollTo(($(document).width() - $(window).width()) / 2, 0);
});
回答by Eric
What's wrong with DOM-ready?
DOM-ready 有什么问题？
$(function() {
$('body').scrollLeft($('#viewContainer').width() * 2/5);
});
