[筆記] JavaScript HTML 多個 Modal 避免底層捲軸滾動

近期在 HTML 畫面實作上,遇上單個畫面內容以及多個 Modal 間,都需要控制捲軸是否出現的情況。這邊筆記下核心重點以及嘗試出的 Best Practice。

html logo


內容

1. 當捲軸所在的層級之上,有任何一個 <div> 出現 overflow: hidden,那捲軸就不會出現。因此常見的作法就是在 <body> 下 overflow: hidden

2. 由於內容層一般而言會有一層 <div id=”app”> 給包裹住。換言之,內容層所在的捲軸隱藏,只要你在內容層有指定高度的情況下,你也可以下 overflow: hidden 在這一層,用來增加控制的彈性

Best Practice

1. 若你的 Modal 是直接掛在 <body> 的第一層,獨立於 <div id=”app”> 外,那 overflow: hidden 就下在 <body>
2. 若你有多個 Modal 交互作用,為了避免同時操作 <body> 上的 overflow: hidden 造成干擾,你可以將一些 Modal 的 overflow: hidden 控制下於 <div id=”app”>。這樣一來,你僅需要避免讓多個 Modal 部分同時出現在畫面上,就可以達成效果

至於避免同時多個 Modal 部分同時出現在畫面上的方法,你可以考慮 height: 0, transform 一個超過畫面的區塊….等


程式碼

按讚加入粉絲團

延伸閱讀