停止父div的滾動條（溢出）當孩子與重疊它自己的

Question

我有嵌套像這樣3周的div：

• 容器
  • 抽屜
    • 抽屜內容

我希望垂直滾動條在視口空間受限時出現。爲此，我將樣式overflow-y: auto;賦予容器div和抽屜內容div。我想要這兩個滾動條，但不是他們都同時出現。

有一個動作可以打開抽屜，在觸發前只有容器div可以通過滾動條顯示。打開抽屜後，抽屜和抽屜內容div覆蓋容器，我希望容器的滾動條不存在，而只顯示抽屜內容的滾動條。

此抽屜打開時的屏幕截圖顯示問題。容器div有紅色邊框，抽屜藍色，抽屜內容綠色。我希望容器div上的外滾動條不會出現。

當然，如果出現視限制一旦抽屜已經打開，這是一個非問題。在打開抽屜前已經限制視口是一個問題，因此Container div的滾動條出現，然後我們打開抽屜，抽屜和抽屜內容出現在頂部，但抽屜內容的滾動條應該是唯一的。

我創建額外的滾動條的原因是因爲這個容器粘住向下滾動主頁時​​，視口的頂部，因此內容可能無法訪問，這是不可取的。

我有一個Javascript解決方案，但尋找一個CSS。

這是一個小提琴，它不是確切的，但接近的情況。由於某些原因，滾動條僅在Windows上顯示。研究這一點。 https://jsfiddle.net/8z49z1dj/5/

任何想法？

謝謝！

Answer 1

在你的小提琴，你明確地設置在容器上的overflow-y，但你只想當抽屜沒有打開。 您可以添加指示抽屜一個額外的類是開放的或不上父母，就像這樣：

document.getElementsByClassName("container")[0].className += " has-open-drawer";

然後，在你的CSS你能夠覆蓋等，從而溢出行爲：

.container.has-open-drawer { 
    overflow-y: hidden; 
} 

請記住，你可能需要在用戶能夠關閉抽屜再次刪除該類。

看到我的叉與here on JSFiddle變化。