it-swarm.cn

一个或两个滚动条用于内容+侧栏?

我正在设计一个网站,并试图确定是让边栏独立于页面内容滚动,还是仅由一个滚动条控制两个div。我应该使用什么原则来指导决策?在哪种情况下,您希望边栏内容在用户滚动浏览主要内容时保持固定?

一个滚动条

  • 用户知道他们在页面上的位置
  • 侧栏中的内容相对于其他内容保持在相同位置
  • 按住鼠标在页面上的任意位置滚动条
  • 大多数网站只使用一个滚动条-符合用户期望
  • 可以具有固定宽度的站点,而页面中间没有难看的滚动条

两个滚动条

  • 可以在浏览主要内容时在边栏中查看信息,当主要内容的长度> 4000px时,这是很好的;或者您同时需要滚动条和主要内容栏中的信息
  • 侧边栏需要页面的整个左侧或固定的页眉,这会降低主要内容的重要性,侧边栏和主要内容的垂直高度
  • 需要在侧边栏中放置鼠标才能滚动其内容
  • 来自同一家公司的不同决策的两个示例是Google Code(它是一个固定宽度的滚动条站点)和Google Reader(它有两个滚动条)。我认为使用Google Reader时,它们需要一个滚动条,因为内容是动态生成的。

感谢您在此方面的帮助-特别是如果您可以通过两种方式指出我的数据。

11
Kevin Burke

我认为您没有在问题中列举的选项是使用浮动侧边栏滚动内容的一种方法(其位置始终与窗口边缘保持固定距离,而不是内容边缘)。

我会仔细考虑两列是否都需要滚动。在您突出显示的情况下,用户在主要内容和侧边栏之间切换上下文可能需要丢失其在页面上的位置(如果它们滚动到主要内容的底部并需要访问侧边栏顶部附近的内容),或者将不得不找出独立的滚动框架,并且需要更多的鼠标移动来选择哪一列进行滚动操作。

在不知道您要开发的应用程序范围的情况下,我的第一个建议是将边栏内容限制为小于窗口的高度。如果确实需要更多空间,则可以在侧栏中使用选项卡,或者在侧栏中使用水平分页的区域。

3
Brendan Berg

我将尝试避免滚动,并解决了以其他方式导航侧栏的问题。例如,通过分页和侧边栏的ajax式更改。

alt text

1
Lode

您似乎已经知道每种类型的利弊,因此添加的内容并不太多。如您所说,有些站点需要2个滚动条,而大多数需要一个。

我要添加另一个想法,这是您提到的2之间的交叉。您可以制作一个静态定位的侧边栏(css,position:fixed),然后仍将侧边栏保留在原位,但只有一个滚动条。只要侧边栏内容比页面短,这对用户来说就不会那么混乱,并且很好。

0
Sruly