スマホでよくあるハンバーガーメニューをクリックするとメニューがスライドインしてくる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;
}