2011-11-22

Media Queriesと-webkit-scrollbar

デバッグ用にタブレットサイズ(768px)以下の時にはスクロールバーを隠そうとしてみたんですが、どうやら動的なスクロールバーの表示切り替えが微妙にバギーな感じです(Chrome 15.0.874.121 m)。良いアイディアだと思ったのになー。

Demo: Media Queries and -webkit-scrollbar

ブラウザを768pxより広い状態から狭くすると想定通り消えます。しかしその後768pxより広くしてもスクロールバーが元のサイズに戻りません(その状態からちょっと狭くすると戻ります)。また縦スクロールバーを強制するテクニックとして有名な、

html {
  overflow-y: scroll;
}

を適用すると狭くしてもまったく消えないようになります。

Demo: Media Queries, overflow-y: scroll, and -webkit-scrollbar

寝起きで盛大に勘違いしてそうですが……。