h's blog

備忘録とか勉強とか

translateXを使ったときに、IEで表示すると水平スクロールバーが表示されてしまう問題への対処法

f:id:hiro0164:20180218191418p:plain

画像とテキストを重ねて中央寄せするときなどに、translateXが便利でよく使っているのですが、IEだと水平スクロールバーが表示されてしまう事があります。

以下のサンプル(もしくはこのページ)をIEで表示するとサンプルデモの結果表示の下部に水平スクロールバーが表示されてしまいます。(Firefox, Chromeで表示した場合は問題なく表示されていると思います。)

See the Pen translateX by m (@m3816) on CodePen.

この場合の対処法は、以下の通り。

See the Pen translateX with overflow-x: hidden by m (@m3816) on CodePen.

bodyにoverflow-x: hiddenを指定することで水平スクロールバーが表示されなくなります。