如何擺脫滾動條彈出頁面位置？

Question

我有一個可以顯示各種高度內容的選項卡頁面，其中一些需要滾動條，有些則不需要。在這些內容之間進行切換的視覺效果雖然很麻煩，但是當窗口滾動條彈出時，它會將整個頁面稍稍移動一點。

事情我已經試過/考慮：

1. 總是有滾動條可見 - 它的工作原理，但我不喜歡它。
2. 設置身體寬度爲98％ - 顯然這仍然是98％的窗口被調整大小，所以仍然彈出。將其設置爲像素值可行，但人們擁有不同尺寸的屏幕。
3. 用腳本補償窗口寬度損失 - 是一個相當簡單的腳本，但足夠有趣，由滾動條出現觸發的窗口大小不會觸發窗口的大小調整事件，我還沒有發現任何其他合適的事件將其附加到。

有沒有人知道保持頁面容器的好方法？

Answer 1

我想你可以用margin/padding添加一個類到body，然後用jQuery刪除它。這樣做的不利之處在於不同的瀏覽器具有不同的滾動條寬度，例如mac上的safari甚至沒有可見的滾動條。所以建議只是讓滾動條一直顯示。

Answer 2

正確答案是

html { width: 100vw; }