質問: 横とたてのスクロールバーを消したのですが、 下記の5%分、liの中の、テキスト情報などのインライン要素がずれて真ん中になりません。 ・わかりにくいので下記で再現してみました。こちらを見てみてください。 下記サイトのサンプル3の方法で、横とたてのスクロールバーを消したのですが、 下記の5%分、liの中の、テキスト情報などのインライン要素がずれて真ん中になりません。 text-align: center;は値での指定ができないようですが、どうずれたぶんずらすのでしょうか? width: 105%;/* 横のスクロールバーをはみ出して、上記のhiddenで隠す */ height: 101%;/* 下のスクロールバー */ ・CSS / ``` * 左から出てくるdrawer-menu */ [id="drawermenu"] { z-index: 300; width: 100%; height: 100%; position: fixed; top: 0; overflow-y: hidden; padding-top: 2.8rem; text-align: center; cursor: pointer; margin-left: -100%; transition-propety:all; transition-duration:1s; } [id="drawermenu"] ul { overflow-y: scroll; overflow-x: scroll; width: 105%;/* 横のスクロールバーをはみ出して、上記のhiddenで隠す */ height: 101%;/* 下のスクロールバー */ } [id="drawermenu"] li { margin-bottom: 0.2rem; background: rgba( 229, 228, 255, 0.3 ); } [id="drawermenu"] li a { height: 6rem; line-height: 6rem; margin: 0 auto; color: #fff; font-size: 2rem; text-decoration: none; text-shadow: 1px 1px 1px rgba(0,0,0,.9); } @media (min-width: 960px) { [id="drawermenu"] li a { font-size: 2.5rem; } } ```
回答: 中央揃えはスクロールバーを除いた幅で行われますから、**スクロールバーの幅だけ**隠す分には中央に配置されます。一方 `5%` はスクロールバーより広いために、隠しすぎになっているのです。ここで5%左にずらすと今度は左に寄りすぎてしまいます。 また、元記事と違いパーセント指定なので、はみ出す幅がウィンドウサイズによって変化します。一方スクロールバーは普通固定幅ですから、ウィンドウ幅を広くするほど隠しすぎの幅が広がります。 解決のヒントはそのQiitaに書かれています。 > > Twitterでご指摘をいただき気付いたのですが、一番内側の要素(例で言うとli)が親要素分の幅いっぱいに広がるものだと、スクロールバーが出現していないときに17px分隠れてしまいます。 > > なのでサンプルコードのliに幅指定をwrapと同じサイズで明記しました。 > > ここの幅指定をしない場合は、中に幅17px分のdiv要素を入れるなどの対応方法もあります。 > > > 今回の場合%指定なので「`overflow:hidden` を指定したブロックと同じ幅を `overflow:scroll` の内側のブロックに指定する」という上記の手は使えず、OSなどによるスクロールバーの幅の違いを完全に吸収することはできません。 ただ、ウィンドウ幅によって大きく中心がずれる問題は回避することができます。 * **`width:105%` を削除し、ネガティブマージン `margin-right: -17px` 等を指定する** スクロールバーを 17px まで隠し、中身が `17px-スクロールバーの幅` 左にずれる * **`width:105%` の内側になる要素に `width: 95.24%` を指定する** スクロールバーを `ウィンドウ幅*5%` まで隠し、中身が `スクロールバーの幅*95.24%` 左にずれる 前者の方が余分に隠れる幅を減らすことができますが、想定よりもスクロールバーが細かった場合は右にずれ込みます。後者はある程度内側に食い込みますが、右にずれ込むことはありません。また、どちらもはみ出させる量が少なければスクロールバーが見えてしまいますが、特に後者はウィンドウ幅に比例しますから、小さいウィンドウ幅を考慮するなら倍率を調整したほうがよいでしょう。 追記:ネガティブマージンで右側にはみ出させるのは、外側のボックスの幅に合わせてwidthが自動調整されることによるものです。ですから縦方向には機能しません。position:absoluteを使う方法を思い出したので、これもサンプルに加えておきました。こっちの方が無難かもしれません。 サンプル 補足:5%増やした分を減らすということで100/105=95.24%という値にしているので、この値から離れるほどウィンドウ幅によってずれ幅が変わるようになります。ただ実際には多少大き目にしておいた方が、平均的なウィンドウ幅でずれが小さくなっていいかもしれません。また、`width: 95.24%` の代わりに `padding-right: 5%` とすることで、背景を内側に食い込ませる代わりに外側にはみ出させてもいいですね。理屈は同じです。 ところで、PCサイトでスクロールバーを消すということは、マウスのホイールやキーボードのPageUp/Down・矢印キーでしかスクロールできなくするということです。これらを普段使わない人にとってはスクロールできないと思われるかもしれません。 またスマホではタッチしたときだけ薄く表示されるようなものが多く、Windowsのように常時表示されるスクロールバーではありません。 そのあたりを踏まえ、本当にこの方法がいいのか検討した方がいいのではと、個人的には思います。