可滚动选择跨浏览器一致吗?

时间:2009-09-02 13:16:39

标签: html css user-interface cross-browser

我需要创建一个下拉列表,其中可以包含100个选项。

我需要一个滚动条才能显示并在所有浏览器中保持一致。

谷歌空了:是否有一个很好的网址来描述这是否一致?

2 个答案:

答案 0 :(得分:4)

出于可用性原因,我强烈建议不要使用带有100个选项的可滚动选择。

除了一个角落情况之外,导航(搜索和选择)该列表对用户来说真的很难并且非常烦人。

UI设计推理需要:

  • 宽鼠标手势(累人),然后立即精确停止(由于惯性很难做到)

  • 非常难以使用滚动条的界面(滚动条位于页面中间而不是右侧的额外废话点) - 请参阅Jacob Nielsen和其他人对使用滚动条和常规的困难的常见咆哮任何太长而且需要大量滚动的邪恶。

  • 眼睛需要一直向上和向后扫描整页菜单。非常累人。

Here is a set of bad examples

[角落的情况是所有选项名称均匀分布在整个字母表中(直到第一个字母),这允许通过按下选项的第一个字母在下拉列表中进行一些可能的键盘导航]

一个合适的用户界面解决方案是让一个选择的内容根据搜索字段动态填充 - 输入文本(想想谷歌的新搜索框或浏览器的地址栏)或有时复选框/单选按钮。

顺便说一句,子菜单解决方案也很难用于鼠标导航 - 手腕轻微抽搐,你失去了所有的指点工作。

我很抱歉这个答案不是“你如何解决我的技术问题”的答案,但我强烈建议你首先解决错误的问题。

HTH。

答案 1 :(得分:0)

对于标准HTML select元素和您描述的要求,简短的回答是

但是,您知道可以设置size属性,以确定一次可见的行数吗? AFAIK这将强制在所有浏览器中滚动,但它不是下拉。像这样:

<select size="10">
  <option>etc</option>
  ...
</select>

optgroup还有可能将选项分成几类。

如果您有多个类别,则可以执行我在一个站点上执行的操作并使用此jQuery click menu,使用单击功能设置隐藏字段。所以现在我有一个带有子类别的下拉列表,很容易找到合适的选项。