スクロールバーがあると画面ががたつく
スクロールバーは役立ちますが、デザインやユーザー体験に悪影響を与えることがあります。
例えば、スクロールバーがあることで画面ががたつくように見えることがあります。この「がたつき」は、特にコンテンツが動くアニメーションや固定レイアウトを使用している場合に顕著です。
そのスクロールバーが画面に表示されることで、コンテンツがずれてしまうという例を用意しました。
コンテンツを追加ボタンを押して見てください。
See the Pen Untitled by kokusyo (@kokusyo) on CodePen.
コンテンツを追加ボタンを押すとこの動画のようにスクロールバーの分コンテンツが左にずれていることが分かります。
このまま見て見ぬ振りも出来るのですが、やはり気になります。
スクロールバーを非表示にする
あらかじめスクロールバーのスペースを用意することも出来ますが、スクロールバーを非表示にすれば画面のレイアウトも変わることなく簡単に解決できます。
ブラウザごとに指定が必要なため、下記コードをスクロールバーを非表示にしたい要素に指定します。
body,html {
-ms-overflow-style: none; /* IEとEdge */
scrollbar-width: none; /* Firefox */
}
body::-webkit-scrollbar {
display: none; /* Webkitブラウザ */
}これにより、コンテンツの量が増えてもスクロールバーが表示されないかつ、スクロール自体はもちろん変わらず可能です。
今回は、画面全体のスクロールを非表示にしたため、bodyタグに指定していますが、他クラスやタグなどにも指定できます。