HTML:嵌套滚动条的行为

时间:2016-02-29 18:57:05

标签: jquery html

当用户执行某项操作时,我会弹出一个jQuery模态窗口。

对于较小的屏幕,此模态窗口有一点height,因此屏幕较小的用户必须向下滚动主窗口(而不是模态窗口)才能看到“确定”和“取消”按钮模态窗口的底部。

此外,此模式窗口有时会包含很长的内容,因此在模式窗口中会不时出现滚动条以允许用户滚动浏览更长的内容。 “确定”和“取消”按钮不属于此可滚动区域,因此它们始终显示在同一位置。

模态是否具有足够长的内容以便滚动,具有较小屏幕的用户仍然需要滚动主窗口以查看模态窗口底部的“确定”和“取消”按钮。

我的问题是:如何制作内部滚动条(模式弹出窗口中的内容更长),一旦完全滚动到底部,将控制传递到外部滚动条,以便用户可以向下滚动主窗口的滚动条看到“确定”和“取消”按钮(无需将鼠标移动到外窗口)?这个问题与在鼠标上使用滚轮有关,因为当用户点击滚动条并且拖动将是奇怪且不直观的时候有这个行为。

我希望这是有道理的:)。

注意:发现:https://ux.stackexchange.com/questions/60339/mouse-wheel-interaction-with-nested-scrollbars

以上链接讨论了IE的默认滚动行为:

默认的Windows范例似乎是: 滚动鼠标光标当前所在的区域 除非无法在该方向上进一步滚动,否则滚动下一个更高级别。

链接中的问题的OP似乎想要避免这种基本行为(或“初始样式”滚动),但这实际上是我想要的。它至少在Chrome中不起作用,但是,这似乎是IE的默认行为。

“初始样式”滚动在这里解释得很好: http://baymard.com/blog/inline-scroll-areas,关于“滚动劫持”的部分基本上是我想要在非IE浏览器中实现的。

1 个答案:

答案 0 :(得分:1)

UX法很简单:屏幕上没有嵌套的可滚​​动区域。

在您的特定情况下:您应该使您的模态窗口始终完全适合当前视图/窗口。因此,总是可以看到dailog OK / Cancel按钮而无需滚动。

通常模态对话框使用半透明垫片,因此隐藏了文档的滚动条。因此,用户只需要在对话框中滚动滚动,而不需要滚动。