Windowsでのスクロールバーのガタつき問題と解決策

Body要素にoverflow: hiddenを設定すると、Windowsではスクロールバーが現れたり消えたりし、ガタつくことがあります。これはスクロールバーの表示領域がページのレイアウトに影響を与えるためです。

この問題を回避する一つの方法は、下記のコードを使用することです。しかし、Firefoxはこの方法をサポートしていません。

html  {
  &.win {
    &::-webkit-scrollbar {
      width: 15px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: colors(blue);
    }
    &::-webkit-scrollbar-track {
      background: transparent;
    }
  }
}

body {
  overflow: overlay;
}

また、css_browser_selector.jsを使用して、このスタイルをWindowsのみに適用させることもできます。