将浏览器中的一页水平滚动网站（不以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/ p>

---

滚动代码

无法实现将页面滚动到中心与纯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. 
 * / 
  

b $ b

您必须调整CSS（请参阅小提琴）：

  body {width：500％} 
 #viewContainer {width：100％} 
  

最后一个注释。当用户禁用JavaScript时，您期望什么？他们是否被允许看到页面的内容？如果是，请添加：

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

否则，添加< noscript& / noscript> 。

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屋！