章節連結
近期在 HTML 畫面實作上，遇上單個畫面內容以及多個 Modal 間，都需要控制捲軸是否出現的情況。這邊筆記下核心重點以及嘗試出的 Best Practice。
內容
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 一個超過畫面的區塊….等
