当浏览器滚动条出现并消失时,保持网页居中

时间:2011-09-14 20:19:46

标签: javascript css

我认为非常基本的问题。我有一个网站,其中一些页面可能适合浏览器的可视垂直区域,而其他页面则不适合(许多网站必须像这样)。

当用户在桌面浏览器上从一个页面浏览到另一个页面时,垂直滚动条因此会出现并消失,具体取决于页面。影响是,当用户只选择另一个导航链接时,精确居中的页面会继续按滚动条的宽度移动 - 什么是阻止这种情况发生的最简单方法,而不会使我的所有网页都高度相同?

第二部分 - 为什么桌面浏览器不仅保留垂直滚动条区域,也许有办法强迫它们?

2 个答案:

答案 0 :(得分:6)

这样做(不适用于IE6):

body { overflow-y: scroll; }

如果您还想始终显示水平滚动条,请使用:

body { overflow: scroll; }

答案 1 :(得分:3)

关于你的第二个问题,并非所有网站都是由固定宽度的中心页面构成的,即使它变得非常普遍。即使在这种情况下,你也必须拥有从点击到点击的不同长度的页面,以便通过这种转变(BTW它移动一半滚动条的宽度;)在WinXP上的8px一个经典的Win2k主题)。

  • 一开始有没有CSS的HTML页面:左对齐(或用希伯来语和阿拉伯语语言右对齐)
  • 然后在14“CRT上逐渐出现HTML表格:每个像素都很珍贵!(全宽,因为 640kB足够很少想象它如何在17”或21“CRT上显示)
  • 然后是固定宽度居中的表格或div:像素在1024px显示器上仍然很珍贵。高度<768px,大多数页面都有折叠(或用Flash制作)。
  • 现在出现了CSS3媒体查询,显示宽度为320到2560像素(每台显示器!),渐进增强或优雅降级。
  • Google主页或网络应用等常见页面:不需要垂直滚动条!

如果您是浏览器供应商,那么建立规则会好运,特别是考虑到Chrome和Firefox以及可能表明供应商正在追求全屏目标的其他浏览器最近消失的菜单,酒吧等显示(我只是按F11,如果我想,并希望我的地址栏回来,但这是另一个故事:))他们可能不愿意“水平”丢失20px。

另一方面,作为这个网站的开发者,你可能会对这个横向移动最烦恼,因为你的网站整天都在你的眼前显示,并且习惯于在这个和那个区域中精确点击甚至没有想到它:你知道你的网站没有其他人!
这不是你的访问者的情况,只有少数人会看到超过两次,你可以通过网络流畅地知道这个现象来自哪里,否则它只是在他们访问的其他几个网站上的轻微烦恼。而且你要考虑对游客来说最烦人的事情:

  • 显示一个滚动条,一眼就能看出它们必须滚动(在第二眼看到这个垂直滚动条被禁用之前,实际上没有滚动)
  • 不时10px水平移位