避免嵌套滾動條

我希望有人可以提出一個我從未見過的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

回答