避免 scroll bar 影響網頁元件的外觀

Scroll bar 是網頁上常見的設計之一
只是有時候不太能預期你的 element 的內容是否多到需要用 scroll bar
或者是 element 的內容會隨著操作而變動
這種不確定性會對網頁的排版造成影響，很可能 scroll bar 的產生會擠壓到原本的元素



上面的示範提供了兩個例子
先注意原本的外觀後繼續操作
移動滑鼠到 element 上就可以看到 scroll bar 的產生
第一個例子的當 scroll bar 出現後，原本的文字排版也跟著變化
第二個例子則是出現 scroll bar 前後的文字排版都相同

建議不要想著去計算 scroll bar 的寬度
首先是 scroll bar 的寬度依各家瀏覽器廠商的實作而不同
再來是用 JavaScript 計算會有效能上的損耗，以及可能有相容性的問題

第二個例子的處理方式是在外面的 element 及內部的 element 中間塞入了個 div
這個 div 的外觀依需求將寬或長指定的跟外層 element 相同
這樣就能保持內容的外觀，scroll bar 也只會影響這個中介 div
很多 web 的設計都能使用這個想法，插入中介 element 讓外層跟內部的顯示效果區隔