#問題
當內容增多，滾動條從無到有時，它的出現擠壓了內容寬度，導致原來設計好的布局被破壞。
#原因滾動條的寬度是計算到內容 content 裡的。
#解決思路
增加乙個中間層，使得外部容器寬度保持設計寬度，內部元素排列保持不變。
#具體案例/方案
使用 antd 的 modal 彈窗，基於其最簡單的基本示例，如圖：
希望的效果：
**實際的效果： **
基於 modal 彈窗 最簡單的基本示例
index.js
... ...
001 遼寧號
002 山東號
003 彈射型
004 平甲板
005 核動力
006 電磁炮
007 **化
008 殲星艦
... ...
... ...
.ant-modal-content
.ant-modal-body
... ...
overflow: hidden隱藏掉超出的部分，隱藏滾動條。
試著做了下，效果如圖：
如此一來，一排是整整齊齊停下了4 個。
但沒了滾動條，使用者很容易誤認為只有這四個。
為了好看損失了必要的功能，這是不可取的。
想到「沒有什麼問題不是加一層中間層解決不了的」，於是加了一層 containerdiv，如圖
001 遼寧號
002 山東號
003 彈射型
004 平甲板
005 核動力
006 電磁炮
007 **化
008 殲星艦
··· ···
index.css
... ...
.ant-modal-content
.ant-modal-body
.container
... ...
可以使用這個偽類::-webkit-scrollbar，不過只能作用於 chrome 核心的瀏覽器。可以參考 mdn 文件。
獲取滾動條的寬度
做了乙個全屏的輪播圖，在設計師那發現問題，banner獲取的寬度是瀏覽器的寬度，在瀏覽器不是全屏的情況下開啟再放大瀏覽器，banner不能全屏顯示。問題其實很簡單，把獲取瀏覽器的寬度改為獲取螢幕寬度就可以了，但瀏覽器的滾動條會佔據一定的寬度，所以需要獲取瀏覽器的滾動條寬度，然後減去這部分寬度，就是b...
滾動條出現擠壓頁面寬度，影響布局
問題描述 當頁面突然出現滾動條的時候，頁面會突然被擠壓，因為滾動條也是需要佔位的呀。解決思路 現在目標就是滾動條出現，但是內容位置不變，依然不動。html container div class container h1 我是容器內容 h1 div 1 新屬性overlay chrome下overf...
動態設定滾動條高度寬度的方法
如果報表資料量很大，行 列都很多，在web頁面輸出的時候，需要固定報表表頭，設定橫向 縱向滾動條，通過拖動滾動條來檢視報表。但是，當報表輸出的標籤中滾動條的寬度 高度都是固定值，不能設定成頁面寬度高度的百分比，這樣由於不同的客戶端的解析度可能不一樣，報表展現出來的效果就不一樣。對於解析度小的機器，在...