画面外に配置した要素が横スクロールで表示されてしまう。

css

スマホでよくあるハンバーガーメニューをクリックするとメニューがスライドインしてくるUIがあるかと思います。

よくメニュー要素をabsoluteの絶対配置でアニメーションさせる事があるかと思いますが、今回translateで画面外にメニュー要素を設定したら横スクロールが表示されてしまったので、それの対処法をメモ。

ただ、すべてのデバイスで試したわけではないのであくまで、同じような事例がった場合の参考と据えてください。

実際の現象とは？

以下、キャプチャー動画を見ていただくとお分かりかと思いますが、ハンバーガーメニューをクリックすると右側からメニューがスライドインされてくるかと思いますが、ドラッグすると右側に余計はスペースが出来てしまってることが分かるかと思います。

実際のソースコード

それでは実際のソースコードは下記です。
ただし、簡略化する為に必要最低限のコードです。



#gnav-wrap {
position: relative;
}
#gnav-list {
  position: absolute;
  width: 100%;
  transform: translate(100%, 0);
  list-style: none;
  transition: all 0.5s;
  background-color: #333;
  height: 100vh; 
}

#gnav-list.active {
  transform: translate(0, 0);
}

CSSでtransform: translate(100%, 0);で横方向にずらして右側の画面外に設置して、クリックしたらtransition:transform: translate(0, 0);　で元の位置に戻すようにしてました。

対処法は？

対処法としては、以下のようにbody要素にCSSでoverflow-x: hidden;を設定すると大丈夫です。他のwidth:100%;とposition: relative;は要らないかもですね。

body {
  position: relative;
  width: 100%;
  overflow-x: hidden;
}