RWD導航關閉畫布圖案：如何滾動彈出區域 - 僅限於？

Question

我使用令人敬畏的布拉德弗羅斯特左導航展開我的響應式設計導航。 （http://codepen.io/bradfrost/pen/IEBrz）。

我需要一些關於彈出的建議。我需要將彈出區域單獨滾動，而不會影響主要內容區域 - 如Facebook應用程序。

對於固定，可滾動區域（內部具有複雜元素）的交叉支持以及相對高度和測量（網站響應），智能手機的交叉支持目前爲止我的經驗相當糟糕。到目前爲止，我已經嘗試過iScroll和jQuery手機。

只有在沒有大量JavaScript插件，客戶端嗅探和CSS供應商特定的黑客的情況下才能實現滾動彈出窗口？

我的客戶非常喜歡這種彈出式樣。性能，跨設備支持和非hacky代碼是「必備」。本土的外觀和感覺是「可能有的」。我沒有任何問題推薦另一種解決導航的方式，我只需要確定我的決定。當然，一切都可以完成 - 但費用是多少？

在我切繩子之前，您有任何建議或建議:)？

Answer 1

您所預覽的預覽看起來非常有前途！

我會建議您使用一點JavaScript來檢測窗口高度。然後，您可以將飛出面板的高度設置爲與頁面相同的高度，並使用display: block; overflow: auto。 （它可能已經有塊顯示設置）。

這將迫使面板在其內部滾動而不是進一步流動。記住

有幾件事情值得銘記：

• 你需要重新計算窗口的變化或方向變化的高度;
• 觸摸屏設備往往不顯示滾動條，這是一把雙刃劍，因爲這意味着當您向上/向下滑動時，您會獲得非常好的應用程序般的感覺。但是，這也意味着用戶可能需要更多的視覺提示，以便可以滾動顯示！