避免嵌套滚动条

时间:2012-08-23 14:47:47

标签: css

我希望有人能推荐一个我从未见过的用户界面。

我有很多需要在固定高度滚动div中显示的数据并使其更加可口,客户希望子数据显示在可以展开和关闭的手风琴div中

问题在于子数据也可能很长并且需要固定的标题,以便用户理解每列中的内容。请看小提琴:http://jsfiddle.net/J5qFA/34/

你必须稍微使用你的想象力,但是将灰色条视为可扩展div上的标题,并将其标记为" Expanded"是一个单击的标题,显示其内容。 (注意,扩展一个标题可以关闭任何打开的div。)

黑条是数据标题,黄色内容是数据。

有没有办法让黑条"坚持"在滚动窗口的顶部,以便在用户向下导航黄色内容时始终可见?请注意,它不应出现在任何灰色标题的顶部,因此,如果用户向下滚动以查看更多黄色数据,则只需要粘贴到滚动窗口的顶部。

如果没有,是否有更好的方法可以确保黑色标题始终在黄色数据上方可见?

哦,我显然不想嵌套滚动条!

希望这是有道理的!

2 个答案:

答案 0 :(得分:0)

将黄色数据div设为固定高度并溢出-y:auto。

http://jsfiddle.net/J5qFA/35/

我也删除了溢出:滚动外部

答案 1 :(得分:0)

嗯,不知道是否有更好的方法,但有一种方式(我想到)使用jQuery scroll,而不是根据屏幕位置附加黑条类window.pageYOffsetwindow.scrollTo(0, y)

我想你可能有3个案例:

  • 黑色条位于屏幕顶部 - 像往常一样显示。
  • 黑色条位于屏幕顶部,而div是屏幕 - 使用position: fixed;
  • 黑色栏位于上方以及它的div - 与1相同。
抱歉,但我现在没有时间编写代码,但如果你选择这样做,我会很乐意提供帮助。

无论如何,祝你好运!