避免嵌套滚动条

我希望有人可以提出一个我从未见过的UI。避免嵌套滚动条

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

问题是，子数据也可能冗长，需要一个固定的标题，以便用户理解每列中的内容。请参阅小提琴：http://jsfiddle.net/J5qFA/34/

您必须稍微使用一下您的想象力，但将灰色条视为可展开div的标题，而将“灰色”标记为已展开其内容的标题。（请注意，展开一个标题可以关闭任何打开的div。）

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

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

如果没有，是否有更好的方法来确保黑色标题总是在黄色数据之上可见？

哦，我不想嵌套滚动条，显然！

希望这是有道理的！

2012-08-23 yolise

也许模态对话框会是一个更好的方法来显示细节，因为不会在一个受限制的区域。 –

毫无疑问，这是一种溶剂。但它不会是100％的CSS。你将需要JS。 –

我不需要它仅仅是CSS。我只需要能够以某种方式将其描述给客户端（以及前端开发人员）。 Diodeus，模式，你的意思是弹出式或灯箱类型的东西？ – yolise

给黄色的数据div一个固定的高度和overflow-y：auto。

香港专业教育学院还删除溢出：滚动在外

2012-08-23 14:57:38 deach

不幸的是，这给了我嵌套的滚动条。外部div必须默认有一个滚动条（现有设计）。 – yolise

哦，有一个JavaScript插件，如果divs内容开始溢出，将会添加“阅读更多”按钮。我无法回想起我的头顶。 – deach

@yolise对于这种方法，有一个[jquery-threedots插件]（http://tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/）用于添加“阅读更多”按钮 – Kuf

好了，不知道是否有更好的办法，只有一种解释（我认为），以做它用jQuery scroll ，而不是根据屏幕的位置使用window.pageYOffset和window.scrollTo(0, y)来附加黑条等级。

我猜你可能有三种情况：

抱歉，但我现在没有时间写代码，但如果你选择这样做，我会很乐意提供帮助。

好运无论如何！

2012-09-11 13:28:52 Kuf

谢谢。客户已经通过这个向开发者提出了一种方法，所以我现在很清楚。如果他们决定不想考虑这件事，我可能会回头看看！ – yolise

回答