1

横と縦のスクロールバーを消したのですが、 下記の5%分、liの中の、テキスト情報などのインライン要素がずれて真ん中になりません。

・わかりにくいので下記で再現してみました。こちらを見てみてください。

$(function() {
  $('.kuruttosuru').on('click', function() {
    $('.kuruttosuru').addClass('active');
  });
});
$(function() {
  $(document).on('click', '.overlay-haikeikurokari, #maware, .link-block , .showMenue', function() {
    //ulをクリックすると、メニューが戻る
    $('.kuruttosuru').removeClass('active');
    // $(this).off('click');
  });
});
$('.modal-button-wrap__button,.link-block').click(function() {
  //ulをクリックすると、メニューが出たり戻ったりする
  $('#drawermenu').toggleClass('showMenue'); //モーダルのクラスを削除して、モーダルボディーを戻す
});
$('#drawermenu li').click(function() {
  //ulをクリックすると、メニューが出たり戻ったりする
  $('#drawermenu').toggleClass('showMenue'); //モーダルのクラスを削除して、モーダルボディーを戻す
});
$(document).on('click', '.overlay-haikeikurokari, #js-drwar-action ,.showMenue', function() {
  //.メニューが出る必要はなく、戻る動きだけ必要な場合
  $('#drawermenu').removeClass('showMenue'); //モーダルのクラスを削除して、モーダルボディーを戻す
});
/* 左から出てくるdrawer-menu */

[id="drawermenu"] {
  z-index: 300;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  overflow-y: hidden;
  padding-top: 0rem;
  text-align: center;
  cursor: pointer;
  margin-left: -100%;
  transition-propety: all;
  transition-duration: 1s;
}

@media (min-width: 960px) {
  [id="drawermenu"] {
    padding-top: 2.8rem;
  }
}

[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;
  }
}

.link-block {
  display: block;
  z-index: 99999;
}


/* .modal-button-wrap__buttonをクリックした際に加えられる */

.showMenue {
  margin-left: 0%;
}


/* /.modal-button-wrap__buttonをクリックした際に加えられる */


/* 左から出てくるdrawer-menu */


/* modalwindow-button-white-threeborder */


/*モーダルウィンドウのボタンの囲い*/

.modal-button-wrap {
  position: fixed;
  top: 2%;
  right: 3%;
}

@media (min-width: 960px) {
  .modal-button-wrap {
    top: 5%;
    right: 5%;
  }
}


/*モーダルウィンドウのボタン*/


/* shadow */

.modal-button-wrap__border {
  box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, .9);
}


/* /shadow */

.modal-button-wrap__button,
.modal-button-wrap__button span,
.overlay-haikeikurokari {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}


/*button-size*/

.modal-button-wrap__button,
.overlay-haikeikurokari {
  position: relative;
  width: 5rem;
  height: 4.4rem;
}


/* /button-size */

.modal-button-wrap__button span,
.overlay-haikeikurokari span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
}


/* threewhiteline */

.modal-button-wrap__button span:nth-of-type(1) {
  top: 0;
}

.modal-button-wrap__button span:nth-of-type(2) {
  top: 20px;
}

.modal-button-wrap__button span:nth-of-type(3) {
  bottom: 0;
}


/* /threewhiteline */


/*drawermenuのボタンのアニメーション*/

.modal-button-wrap__button.active span:nth-of-type(1) {
  -webkit-transform: translateY(20px) rotate(-315deg);
  transform: translateY(20px) rotate(-315deg);
}

.modal-button-wrap__button.active span:nth-of-type(2) {
  opacity: 0;
}

.modal-button-wrap__button.active span:nth-of-type(3) {
  -webkit-transform: translateY(-20px) rotate(315deg);
  transform: translateY(-20px) rotate(315deg);
}


/*Reset Stylesheet*/


/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}


/* change colours to suit your needs */

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}


/* change colours to suit your needs */

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* change border colour to suit your needs */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- drawermenu -->
<nav>
  <div id="drawermenu">
    <ul>
      <li class="link-block">
        <a class='header__social-btn drawermenu__social-btn symbol animation-hover action-hover' href="https://plus.google.com/share?url=http:///portfolio/index.html" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"
          title='&#xe039;'></a>

        <a class='header__social-btn drawermenu__social-btn symbol animation-hover action-hover' href="http://www.facebook.com/share.php?u=http:///portfolio/index.html" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"
          title='&#xe027;'></a>

        <a class='header__social-btn drawermenu__social-btn symbol animation-hover action-hover' href="http://twitter.com/share?url=" title='&#xe086;'></a>
      </li>
      <li id="maware"><a class="link-block" href="#js-about-me">ABOUTME</a></li>
      <li class="link-block"><a class="link-block action-hover animation-hover" href="#js-gallary">GALLARY</a></li>
      <li><a class="link-block action-hover animation-hover" href="#js-gmap">MAP</a></li>
      <li><a class="link-block action-hover animation-hover" href="#js-inquiry">CONTACT</a></li>
      <li id="js-drwar-action"><a class="link-block drawermenu__gototop action-hover animation-hover" href="#top"><i class="material-icons material-icons_large action-hover animation-hover">&#xE5CE;</i></a></li>
      <li><a class="link-block action-hover animation-hover" href="http:///portfolio/index.html">TOPPAGE</a></li>
      <li><a class="link-block action-hover animation-hover" href="http:///portfolio/index.html">BLOG</a></li>
    </ul>
  </div>
</nav>
<!-- /drawermenu -->



<!-- drawermenu-button -->
<div class="modal-button-wrap">
  <a class="animation-hover action-hover modal-button-wrap__button kuruttosuru">
    <span class="modal-button-wrap__border"></span>
    <!-- border -->
    <span class="modal-button-wrap__border"></span>
    <!-- border -->
    <span class="modal-button-wrap__border"></span>
    <!-- border -->
  </a>
</div>

下記サイトのサンプル3の方法で、横とたてのスクロールバーを消したのですが、
下記の5%分、liの中の、テキスト情報などのインライン要素がずれて真ん中になりません。
text-align: center;は値での指定ができないようですが、どうずれたぶんずらすのでしょうか?

width: 105%;/* 横のスクロールバーをはみ出して、上記のhiddenで隠す */
height: 101%;/* 下のスクロールバー */

http://qiita.com/naru0504/items/ff0c77775223dc5a9148

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;
  }
}
6
  • 念のためお聞きしますが、PC上でスクロールバーを隠したいが、ホイールやキーボードではスクロールできるようにしたい、ということですよね?(そうでないならもっと簡単な方法があるかと)
    – unarist
    Commented 2016年2月21日 10:17
  • はい、スマホやPCの画面でスクロールバーを見えなくして、かつマウスや指のスクロールでスクロールできるようにしたいです。 上記の参考サイトでできたのですが、widthを105%にしたので、当たり前ですが5%右にずれてしまい困っています。ポジションですべての値を同じにすると絶対真ん中に来ると聞きますがこれでもずれるでしょうか? 左右をright:0; left:5%; としても真ん中に来ないでしょうか?
    – web
    Commented 2016年2月21日 10:28
  • ちなみにホイールとはどういうことでしょうか? 初心者ですいません。
    – web
    Commented 2016年2月21日 10:29
  • ホイールは・・・スクロールに使うマウスのボタンですね: 724685.com/weekly/qa020227.htm
    – unarist
    Commented 2016年2月21日 10:32
  • ホイールは、マウスの一部のことだったのですね。 ありがとうございます。
    – web
    Commented 2016年2月21日 12:57

1 件の回答 1

2

中央揃えはスクロールバーを除いた幅で行われますから、スクロールバーの幅だけ隠す分には中央に配置されます。一方 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を使う方法を思い出したので、これもサンプルに加えておきました。こっちの方が無難かもしれません。

サンプル http://jsfiddle.net/unarist/4vxw93vm/embedded/

.outer {
  height: 100px;
}

.inner {
  height: 100%;
}

#a .outer {
  overflow-x: hidden;
}

#a .inner {
  overflow-y: scroll;
  margin-right: -17px;
}

#a .content {}

#b .outer {
  overflow-x: hidden;
}

#b .inner {
  overflow-y: scroll;
  width: 105%;
}

#b .content {
  width: 95.24%;
}

#c .outer {
  overflow-x: hidden;
  position: relative;
}

#c .inner {
  overflow-y: scroll;
  position: absolute;
  right: -17px;
  left: 0;
  top: 0;
  bottom: 0;
}

#c .content {}


/* common styles */

div {
  box-sizing: border-box;
}

.hint {
  height: 25px;
  text-align: center;
}

.line {
  display: inline-block;
  width: 1px;
  height: 100%;
  background: black;
}

.outer,
.inner,
.content {
  padding: 0.5em 0;
}

.outer {
  background: #beb;
}

.inner {
  background: #ebb;
}

.content {
  background: #bbe;
  height: 200px;
  text-align: center;
}
<div id="a">
  margin-right: -17px
  <div class="outer">
    <div class="inner">
      <div class="content">
        <span class="line" />
      </div>
    </div>
  </div>
  <div class="hint"><span class="line" /></div>
</div>
<div id="b">
  width: 105% &gt; width: 95.24% (もしくは padding-right: 5%)
  <div class="outer">
    <div class="inner">
      <div class="content">
        <span class="line" />
      </div>
    </div>
  </div>
  <div class="hint"><span class="line" /></div>
</div>
<div id="c">
  position: relative/absolute/fixed &gt; position: absolute; right: -17px; top/left/bottom: 0;
  <div class="outer">
    <div class="inner">
      <div class="content">
        <span class="line" />
      </div>
    </div>
  </div>
  <div class="hint"><span class="line" /></div>
</div>
<pre>
http://ja.stackoverflow.com/a/22354/ 用のサンプル

黒い縦線は text-align: center の中央を表しています。
ボックスの外に書かれた線がウィンドウの中心なので、ボックスの中の線と比較してみてください。

スクロールバーの幅(主にOSによって違う?)やウィンドウ幅によって結果は変化します。
</pre>

補足:5%増やした分を減らすということで100/105=95.24%という値にしているので、この値から離れるほどウィンドウ幅によってずれ幅が変わるようになります。ただ実際には多少大き目にしておいた方が、平均的なウィンドウ幅でずれが小さくなっていいかもしれません。また、width: 95.24% の代わりに padding-right: 5% とすることで、背景を内側に食い込ませる代わりに外側にはみ出させてもいいですね。理屈は同じです。


ところで、PCサイトでスクロールバーを消すということは、マウスのホイールやキーボードのPageUp/Down・矢印キーでしかスクロールできなくするということです。これらを普段使わない人にとってはスクロールできないと思われるかもしれません。

またスマホではタッチしたときだけ薄く表示されるようなものが多く、Windowsのように常時表示されるスクロールバーではありません。

そのあたりを踏まえ、本当にこの方法がいいのか検討した方がいいのではと、個人的には思います。

14
  • 確かにユーザービリティー上は良くないですね。 スクロールがダサいので、スクロールバーをかっこよいものに変更するのが一番ですかね。 また教わったようにmargin-right: 15pxをつけたのですが、やはりうまくいきませんでした。 jsfiddle.net/80od313c/11
    – web
    Commented 2016年2月22日 1:15
  • 下記の形だと中央ぞろえで、背景ありにはできましたが、 背景がliの上下の隙間のないただの白い背景になってしまいました。 [id="drawermenu"] ul { overflow-y: scroll; overflow-x: scroll; width: 105%;/* 横のスクロールバーをはみ出して、上記のhiddenで隠す / height: 101%;/ 下のスクロールバー / / padding-right: 5%; */ background: rgba( 229, 228, 255, 0.3 ); } [id="drawermenu"] li { width: 95.24%; margin-bottom: 0.2rem; /*background: rgba( 229, 228, 255, 0.3 ); */ } liの上下の隙間はあきらめるしかないですかね。
    – web
    Commented 2016年2月22日 1:40
  • @web -15pxの誤りでした、すみません。その他にも色々気になる点があったので、書き直してサンプルも追加しました。上下の隙間に関してはサンプルの1番目か3番目がいいかと。白いborder付ける手もありそうですが。
    – unarist
    Commented 2016年2月22日 6:18
  • 下記のようになりました。 jsfiddle.net/80od313c/14 横のスライドバーが出てしまったのですが、どこか違いますでしょうか? 何度もすいません。
    – web
    Commented 2016年2月23日 2:06
  • @web 内側にはheight指定、例えば height:100% が必要です。また、外側でhiddenにするのは overflow-y ではなく overflow-x です。内側のheightからはみ出た分をy方向にスクロールさせ、x方向にはみ出たスクロールバーを外側の overflow-x:hiddenで隠す、という仕組みは理解できていますか?
    – unarist
    Commented 2016年2月23日 2:15

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。