javascript – 在浏览器中中心一页水平滚动网站(不以div为中心)

前端之家收集整理的这篇文章主要介绍了javascript – 在浏览器中中心一页水平滚动网站(不以div为中心)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当浏览器打开我的页面时,浏览器应该已经在整个页面的中心.

含义:我有一个水平的单页,而不是从左边开始,向右边(例如this),将从中间开始,并且可以滚动到右边和左边的内容.

这是一个视觉:

如果可能,我想避免通过JavaScript或jQuery(我正在使用它用于导航帮助和东西)的dom-ready滚动,并且只使用纯html5 / css或者至少集中屏幕前置 – 准备通过的JavaScript / jQuery的.

我的两个想法:

a)将容器移动到左边,例如使用margin-left:-x,但通常会将其关闭.

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

唉,我自己也不太了解这个.

附:这里我的jsfiddle一致性:http://jsfiddle.net/alexdot/2Dse3/

@R_301_323@


如果要隐藏数据,请添加可见性:hidden;到一开始就应该隐藏的内容的元素.执行我的页面滚动代码,最后改变可见性:hidden;到可见度:可见.

会发生什么?

> 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来读取此页面< / noscript&gt ;.

猜你在找的JavaScript相关文章