スクロールバー表示/非表示時のガタツキを防ぐ

あらかじめスクロールバー分のスペースを確保することで、要素が増えスクロールバーが表示されてもガタつかないようにできる。

※2024-06-03時点ではChrome94、Edge94、Firefox97でのみ利用可能。Safariは未サポート。

.container {
  scrollbar-gutter: stable;
}

// scrollbar-gutter: stable;
+---------+-+
|         | |
|         | |
+---------+-+
           ↑ 右端のスクロールバーが表示される部分に余白ができる

// scrollbar-gutter: stable both-edges;
+-+-------+-+
| |       | |
| |       | |
+-+-------+-+
 ↑         ↑ 両サイドに余白ができる