画面の外に要素を配置した時に横スクロールを表示させない
ハンバーガーメニューの実装で、 position: absolute と translate を使って画面の外に要素を追い出すと横スクロールバーが表示されます。このスクロールバーを表示したくないので、 overflow-x: hidden を指定します。
完成したハンバーガーメニュー
次の画像は、メニュー部分を transform: translateX(100%) で画面の外に追い出した状態になります。画像の下の方にうっすらスクロールバーが表示されているのを確認できます。
簡単なサンプルを用意すると次のような HTML になります。
<body>
<button type="button" id="hamburger-btn" class="c-hamburger" role="button" aria-expanded="false" aria-controls="drawer">
<span class="c-hamburger**line"> </span>
</button>
<nav id="drawer" class="p-nav" aria-labelledby="hamburger-btn">
<ul class="c-nav-list">
<li class="c-nav**item"><a href="#">01.GIMP</a></li>
<li class="c-nav**item"><a href="#">02.Inkscape</a></li>
<li class="c-nav**item"><a href="#">03.SketchUp</a></li>
<li class="c-nav**item"><a href="#">04.JW Cad</a></li>
<li class="c-nav**item"><a href="#">99.Leather Craft</a></li>
</ul>
</nav>
<div>コンテンツ</div>
</body>この HTML にある nav 要素を画面の外に追い出すため position: absolute と transform: translateX(100%) を指定したスタイルシートを用意します。
.p-nav {
position: absolute;
padding-top: 2rem;
padding-left: 2rem;
width: 100vw;
background-color: #ffffff;
transform: translateX(100%);
transition: all 0.5s 0s ease;
z-index: 999;
}
.is-drawerActive .p-nav {
transform: translateX(0);
}この状態をブラウザで確認すると、ブラウザに横スクロールバーが表示されます。右へスクロールさせればメニューが表示されることが確認できます。
スクロールバーを消す
スクロールバーを消すには、 body 要素に overflow-x: hidden を設定します。 overflow-x プロパティは、ブロックレベル要素の内容が左右の境界からあふれた場合にどのように表示するのか・表示しないのか等を設定します。この場合、表示させたくないので hidden を設定します。
body {
background-color: #f6f6f6;
overflow-x: hidden;
}