情境

當我們內容超出頁面的時候，我們會設置滾動條。上個單元中，我們介紹了使用 auto 來設置，避免不需要的時候還出現滾動條：

.card {
  overflow-y: auto;
}

從上圖來看，左右兩張卡片，標題一樣，內容除了右邊又更長的內容之外，基本上文字的內容是一樣的。

不知道讀者是否有觀察出什麼特別的現象呢？
眼尖的圖者可能發現了，因為右邊的卡片出現了滾動條，連帶其內容也會跟著滾動條而被壓縮掉空間。

例如下圖左邊卡片第一行最後一個字 belief，在右邊卡片的時候被換行到第二行第一個字了。

再舉一個例子，有時候有些頁面會在使用者操作的過程產生滾動條。例如原本的頁面沒有滾動條，但是因為我們打開一個選單，而讓頁面產生滾動條，等選單操作完畢，滾動條又會消失。

這樣對使用者來說，頁面的排版會因為滾動條出現又消失而變來變去。可能有些區塊因為滾動條壓縮到他的空間而在左右方向變小，也因此裡面的文字左右空間不夠而產生換換行，而換行的狀況也影響到區塊高度的增加，所以整個頁面會瞬間大幅度的改變，又大幅度的變回去：

你能看見多遠的未來呢？

我們先來介紹兩種不同的 scrollbar

Classic Scrollbars：經典滾動條是放置在所謂的Scrollbar Gutter中的滾動條。 Scrollbar Gutter 是內邊框邊緣和外填充邊緣之間的空間。對於經典滾動條，Scrollbar Gutter 的大小與滾動條的寬度相同。這些滾動條通常是不透明的，並從相鄰的內容中佔用一些空間。

Overlay Scrollbars：覆蓋滾動條是那些放置在內容上的 iOS/macOS 風格的滾動條。它們默認是不顯示的，僅在用戶滾動時顯示。為了保持滾動條下面的內容可見，因此滾動條是半透明的，滾動條樣式取決於當前瀏覽器來確定，滾動條的大小也可能會有所不同。

因此，特別是使用 Mac 的朋友，因為預設是覆蓋滾動條，所以很容易會忽略這樣的問題。

我們可以更改「系統偏好設定」來更改 Mac 預設的滾動條，這樣我們能夠在 Mac 上面更容易看出問題：

剛剛我們有提到一個名詞叫做 Scrollbar Gutter，滾動條的空間，他指的是內邊框邊緣和外填充邊緣之間的空間，也就是造成出現滾動條出現而壓縮到我們內容排版的主因。

因此，我們只要記得在滾動元件上設置 scrollbar-gutter: stable; 就能解決這樣的問題：

.card {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

這樣看起來，左右兩邊內容換行的段點就一致了。

但需要特別留意，scrollbar-gutter 到目前為止，還不是相容性很高的屬性，因此在使用的時候要特別留意：

小結

今天我們介紹了 scrollbar 出現之後，會影響到元件內容排版的現象，並且透過 scrollbar-gutter: stable 輕鬆的解決問題。

我們也介紹了兩種不同的 scrollbar，包含經典滾動條(Classic Scrollbars)以及覆蓋滾動條(Overlay Scrollbars)，瞭解滾動條的行為能夠幫助我們預先想到後續的問題，防患未然。

解決的方法不難，但要考慮到這個問題，確實會需要花一點心思或是經驗的累積，希望本篇能夠幫助到大家。

[聊天時間]
「記得要保留滾動條空間」這件事情確實很容易被忽略。因為第一個問題我們要先考慮內容會不會太長而需要出現滾動條，如果連內容太長都沒有考慮到，那後面就更不用說了。

當我們考慮到內容太長而需要出現滾動條時，我們也需要考慮是不是要總是出現滾動條？考慮完這件事情之後，我們才會再考慮到出現滾動條會不會壓縮到我們原本的排版。

另一方面，也因為很多開發者是使用 Mac 來開發，所以這件事情更容易被忽略，因為 Mac 預設的滾動條是覆蓋滾動條，不會對空間有所影響。

但我們不能假設使用者都跟我們一樣使用的是 Mac，會需要想到這一步，我們才會想到需要為使用者貼心的加上「scrollbar-gutter」。

確實一開始就要有能力想到這一步，著實不容易，唯一的建議，就是多看、多做、多踩雷，所謂三折肱而成良醫啊。