22354


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

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

[code]

    $(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'); //モーダルのクラスを削除して、モーダルボディーを戻す
    });
[/code]

[code]

    /* 左から出てくる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;
    }
[/code]

[code]

    <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>
[/code]

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

[code]

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

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

**CSS**

[code]

    /* 左から出てくる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;
      }
    }
    
[/code]


CC BY-SA 4.0
2016-02-21T02:24:13.463
22328
2019-12-13T18:16:33.863
2019-12-13T18:15:10.710
32986
14320
question
css
横と縦のスクロールバーを消したのですが、 5%分、liの中のテキスト情報などのインライン要素がずれて真ん中になりません。


中央揃えはスクロールバーを除いた幅で行われますから、 **スクロールバーの幅だけ** 隠す分には中央に配置されます。一方 `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/>

[code]

    .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;
    }
[/code]

[code]

    <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>
[/code]

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

* * *

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

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

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


CC BY-SA 4.0
2016-02-21T10:40:34.350
22354
2019-12-13T18:16:33.863
2019-12-13T18:16:33.863
32986
8000
22328
answer