在浏览器中将一页水平滚动的站点居中(而不是将 div 居中) [英] Center a one page horizontally scrolling site in browser (not centering a div)

问题描述

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

含义:我有一个水平的一页，而不是从左边开始向右移动(例如

解决方案

解决方案
如果要隐藏数据，请将 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) 是一个高效的跨兄弟函数，* 将文档滚动到 X、Y 位置* document.body.offsetWidth 包含主体宽度的值* document.documentElement 包含文档宽度的值** 逻辑:如果要使页面居中，则必须减去* 正文的宽度与文档的宽度，然后将其分开* 2.*/

您必须调整 CSS(请参阅 Fiddle):

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

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

否则，添加.

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.

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.

Two ideas on my part:

a) moving the container to the left e.g. using margin-left:-x, but that usually cuts it off.

b) moving the screen to the right from the start.

Alas, I have been too unsavvy to achieve this on my own.

p.s. here my jsfiddle for consistency: http://jsfiddle.net/alexdot/2Dse3/

解决方案

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.

What's going to happen?

1. CSS hides the contents of these elements: visibility:hidden
2. The Page loads
3. JavaScript causes the page to scroll to the center: window.scrollTo(..., ...)
4. JavaScript shows the secret content (outside the view of the browser): visibility=visible
5. The user scrolls to the left/right, and is able to read the secret

Fiddle: 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).

JavaScript code:

 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):

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:

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

Otherwise, add <noscript>JavaScript is required to read this page</noscript>.

这篇关于在浏览器中将一页水平滚动的站点居中(而不是将 div 居中)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！