質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

スクロールバーの表示に対してのズレの対処方法を教えてください

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,787

usawb

score 26

スクロールバーによる要素のズレに対応したいです。

マウスオーバーしたときに、スクロールバーを表示し、マウスアウトしたときには、またスクロールバーを非表示にする処理を作っています。
その処理の仕組みは作れたのですが、スクロールバーを表示したときに要素が左に少しずれてしまいます。そのズレが起こらないようにするにはどうすればよいですか?
スクロールバーを要素の外部に表示する方法でもよいです。
良い方法があれば教えていただきたいです。

すべてのコード

<!DOCTYPE html>
<html lang="ja">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width" ,initial-scale="1.0">

    <title>Sidemenu</title>

    <style>
        *{
            font-family: 'FOT-筑紫ゴシック Pr5 L','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','Meiryo UI','MS UI Gothic','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
            color:#333;

        }
        body{
            width:100%;
            height:100%;
        }
        nav{
            position: fixed;;
            top:0;
            left:0;
            right:auto;
            bottom:0;
            width:200px;
            height:100%;
            background:white;
            box-shadow: 2px 0 4px rgba(50,50,50,0.8);
            text-align: center;
            box-sizing: border-box;
            word-wrap: break-word;

        }
        #mail{
            width:100%;
            height:30px;
            margin:8px auto;
        }
        #mail p{
            width:150px;
            height:32px;
            line-height: 32px;
            font-size:12px;
            font-weight: bold;
            border-radius: 5px;
            margin:0px auto;
            background: #45484d; /* Old browsers */
            background: -moz-linear-gradient(top, #45484d 0%, #333 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(top, #45484d 0%,#333 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom, #45484d 0%,#333 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#333',GradientType=0 ); /* IE6-9 */
            box-shadow: 1px 2px 5px black;
        }
        #mail p a{
            width:100%;
            height:100%;
            display: inline-block;
            color:white;
            text-decoration: none;
        }
        #side_menu{
            width:100%;
            height:100%;
            overflow-y: hidden;
            box-sizing: border-box;
            word-wrap: break-word;
            position: relative;

        }
        #side_menu::-webkit-scrollbar {
            width: 5px;
            height:100px;
        }
        #side_menu::-webkit-scrollbar-track {
            background: white;

        }
        #side_menu::-webkit-scrollbar-thumb {
            box-shadow: inset 0 0 2px rgba(50,50,50,0.4);
            background-color: rgba(70, 70,70, 0.3);
            height:100px;

        }
        #side_menu .side_wrapper h1{
            width:100%;
            height:60px;
            line-height:60px;
            margin:0 auto;
            background: white;
            border-bottom:0.5px solid rgba(137, 140, 142, 0.5);
        }

        #share_area{
            width:90%;
            height:35px;
            margin:8px auto;
            margin-bottom:10px;
        }
        #share_area .share_b{
            width:30px;
            height:30px;
            float:left;
            margin-right:5px;
            margin-left:5px;
            border-radius: 50%;
            border:solid 1px g;
            background: rgba(90, 208, 118, 0.9);
            padding: 5px;
            transition: all .3s ease;
            overflow: hidden;
            position: relative;
            z-index: 0;
        }
        #share_area .share_b:first-child{
            margin-left:20px;
        }
        #share_area .share_b:after{
            display: inline-block;
            content:'';
            width:100%;
            height:100%;
            transform:rotateZ(140deg);
            background:green;
            position:absolute;
            top:13px;
            right:-13px;
            z-index:-5;
            opacity: 0.5;

        }
        #share_area .share_b img{
            width:100%;
            height:100%;
            z-index: 3;
        }
        #share_area .share_b:hover{
            opacity: 0.7;
            transition: all .3s ease;
        }
        ul{
            padding:0;
            width:98%;
            font-size: 12px;
            margin:0 auto;

        }
        .sogo_list,.kategori_list,.gozyu_list{
            width:100%;
            list-style-type:none;
        }
        .sogo_list li,.kategori_list li,.gozyu_list li{
            width:100%;
            height: 35px;
            line-height: 35px;
            /*border-bottom:0.3px solid rgba(200, 200, 200, 0.7);*/
        }
        .sogo_list li a,.kategori_list li a,.gozyu_list li a{
            text-decoration:none;
            color:black;
            display: inline-block;
            width:100%;
            height:100%;
            transition:all .3s ease-out;
            position: relative;

        }
        .sogo_list li:first-child,.kategori_list li:first-child,.gozyu_list li:first-child{
            font-size:15px;
            font-weight: 700;
            height:40px;
            line-height: 40px;
            border-bottom:transparent;
            background:rgba(90, 208, 118, 0.6);
            color:white;
            letter-spacing: 1.3px;
            position: relative;
            overflow: hidden;
            text-shadow: 1px 2px 1px #333;
        }
        .sogo_list li:first-child::after,.kategori_list li:first-child:after,.gozyu_list li:first-child:after{
            display: inline-block;
            content:'';
            width:120%;
            height:120%;
            transform:rotateZ(160deg);
            background:green;
            position:absolute;
            top:15px;
            right:-50px;
            z-index: -5;
            opacity: 0.7;
        }
        #side_menu ul li a:hover{
            transition:all .3s ease-in;
            background-color: rgba(220, 220, 220, 0.4);
        }
        #side_menu ul li a::after{
            display: inline-block;
            content: '';
            position: absolute;
            bottom:0;
            left:0;
            width:100%;
            height:0px;
            opacity: 0.4;
            background: gray;
        }
    </style>
</head>
<body>
    <nav>
        <div id="side_menu">
            <div class="bar"></div>
            <div class="side_wrapper">
                <h1>タイトル</h1>
            </div>
            <div id="share_area">
                <div class="share_b"><a href=""><img src="../IMG/CONP/twitter.png"></a></div>
                <div class="share_b"><a href=""><img src="../IMG/CONP/facebook.png"></a></div>
                <div class="share_b"><a href=""><img src="../IMG/CONP/google.png"></a></div>
            </div>
            <div class="sogo_nav">
                <ul class="sogo_list">
                    <li></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                </ul>
            </div>
            <div class="katgori_nav">
                <ul class="kategori_list">
                    <li></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                </ul>
            </div>
            <div class="gozyu_nav">
                <ul class="gozyu_list">
                    <li></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                </ul>
            </div>
            <div id="mail"><p><a href="">お問い合わせ</a></p></div>

        </div>
    </nav>

    <script>
        var Nav = document.querySelector("#side_menu");

        Nav.addEventListener("mouseover",function(){
            Nav.style.overflowY = "scroll";
        },false);
        Nav.addEventListener("mouseout",function(){
            Nav.style.overflowY = "hidden";
        },false);
    </script>
</body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+3

#side_menu {
    overflow-x: hidden;
}
#side_menu_inner {
    width:200px;
}
<nav>
    <div id="side_menu">
        <div id="side_menu_inner">
        <!-- 省略 -->
        </div>
    </div>
</nav>

動くサンプル:https://jsfiddle.net/4mhok173/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+1

ズレるって症状が出るんだと思ってやってみたのですが、win10のchrome,edge,firefoxで症状を確認できなかったので、スクロールバーを表示させるとその分表示幅が狭くなるって話ですか?
もし、そうであればスクロールバーの幅を計算してその分を足してやるとか。
他の環境で左にずれるのであれば、すみません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/12 18:20

    回答ありがとうございます。
    現在ブラウザはChromeを使っています。
    ズレているのは要素内の<ul></ul>の部分です。margin:0 auto;でセンタリングしているのですが、スクロールバーが表示されることで、ズレてしまうようです。おそらくスクロールバーを含めて真ん中なるといったほうが正しいかもしれません。
    よろしくお願いします。

    キャンセル

  • 2017/05/12 18:43

    やはり、幅の変化による中央の変化ですからスクロールバーの幅の分だけ変化させてやればOKだと思います。サイズはこんな感じでもいいのでは。
    var tgt = document.getElementById('side_menu');
    var outerW = tgt.offsetWidth;
    var innerW = tgt.clientWidth;
    var barW = outerW - innerW;

    キャンセル

  • 2017/05/12 18:48

    マウスオーバー時にNav.style.width = 幅+スクロールバーの幅;に直したらできました!
    こんな簡単な問題に回答してもらって申し訳ないです。
    助かりました。ありがとうございます。

    キャンセル

0

スクロールバーの表示、動作まで出来ているのであれば。
CSSだけの話ではないかと思いますが、ソースが無いんですね…

ありもののScriptでは、通常

#side_menu {
  z-index:1;
  position:relative;
}
.sb {/* 名前はテキトー */
  z-index:100;
  position:absolute;
  right:0;
  top:0;
  width:5px;/* スクロールバーの幅 */
  height:100%;
}


って感じになっていますが、同じではないかなと思います。
要するに、重ねずに、横に表示しちゃうからズレるという感じですかね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/12 16:48

    回答ありがとうございます。教えていただいたコードで試してみたのですが、やはり要素は左にずれてしまいます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る