Q&A
回答ありがとうございます。
現在ブラウザはChromeを使っています。
ズレているのは要素内の<ul></ul>の部分です。margin:0 auto;でセンタリングしているのですが、スクロールバーが表示されることで、ズレてしまうようです。おそらくスクロールバーを含めて真ん中なるといったほうが正しいかもしれません。
よろしくお願いします。
###スクロールバーによる要素のズレに対応したいです。
マウスオーバーしたときに、スクロールバーを表示し、マウスアウトしたときには、またスクロールバーを非表示にする処理を作っています。
その処理の仕組みは作れたのですが、スクロールバーを表示したときに要素が左に少しずれてしまいます。そのズレが起こらないようにするにはどうすればよいですか?
スクロールバーを要素の外部に表示する方法でもよいです。
良い方法があれば教えていただきたいです。
###すべてのコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width" ,initial-scale="1.0"> 7 8 <title>Sidemenu</title> 9 10 <style> 11 *{ 12 font-family: 'FOT-筑紫ゴシック Pr5 L','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','Meiryo UI','MS UI Gothic','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; 13 color:#333; 14 15 } 16 body{ 17 width:100%; 18 height:100%; 19 } 20 nav{ 21 position: fixed;; 22 top:0; 23 left:0; 24 right:auto; 25 bottom:0; 26 width:200px; 27 height:100%; 28 background:white; 29 box-shadow: 2px 0 4px rgba(50,50,50,0.8); 30 text-align: center; 31 box-sizing: border-box; 32 word-wrap: break-word; 33 34 } 35 #mail{ 36 width:100%; 37 height:30px; 38 margin:8px auto; 39 } 40 #mail p{ 41 width:150px; 42 height:32px; 43 line-height: 32px; 44 font-size:12px; 45 font-weight: bold; 46 border-radius: 5px; 47 margin:0px auto; 48 background: #45484d; /* Old browsers */ 49 background: -moz-linear-gradient(top, #45484d 0%, #333 100%); /* FF3.6-15 */ 50 background: -webkit-linear-gradient(top, #45484d 0%,#333 100%); /* Chrome10-25,Safari5.1-6 */ 51 background: linear-gradient(to bottom, #45484d 0%,#333 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 52 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#333',GradientType=0 ); /* IE6-9 */ 53 box-shadow: 1px 2px 5px black; 54 } 55 #mail p a{ 56 width:100%; 57 height:100%; 58 display: inline-block; 59 color:white; 60 text-decoration: none; 61 } 62 #side_menu{ 63 width:100%; 64 height:100%; 65 overflow-y: hidden; 66 box-sizing: border-box; 67 word-wrap: break-word; 68 position: relative; 69 70 } 71 #side_menu::-webkit-scrollbar { 72 width: 5px; 73 height:100px; 74 } 75 #side_menu::-webkit-scrollbar-track { 76 background: white; 77 78 } 79 #side_menu::-webkit-scrollbar-thumb { 80 box-shadow: inset 0 0 2px rgba(50,50,50,0.4); 81 background-color: rgba(70, 70,70, 0.3); 82 height:100px; 83 84 } 85 #side_menu .side_wrapper h1{ 86 width:100%; 87 height:60px; 88 line-height:60px; 89 margin:0 auto; 90 background: white; 91 border-bottom:0.5px solid rgba(137, 140, 142, 0.5); 92 } 93 94 #share_area{ 95 width:90%; 96 height:35px; 97 margin:8px auto; 98 margin-bottom:10px; 99 } 100 #share_area .share_b{ 101 width:30px; 102 height:30px; 103 float:left; 104 margin-right:5px; 105 margin-left:5px; 106 border-radius: 50%; 107 border:solid 1px g; 108 background: rgba(90, 208, 118, 0.9); 109 padding: 5px; 110 transition: all .3s ease; 111 overflow: hidden; 112 position: relative; 113 z-index: 0; 114 } 115 #share_area .share_b:first-child{ 116 margin-left:20px; 117 } 118 #share_area .share_b:after{ 119 display: inline-block; 120 content:''; 121 width:100%; 122 height:100%; 123 transform:rotateZ(140deg); 124 background:green; 125 position:absolute; 126 top:13px; 127 right:-13px; 128 z-index:-5; 129 opacity: 0.5; 130 131 } 132 #share_area .share_b img{ 133 width:100%; 134 height:100%; 135 z-index: 3; 136 } 137 #share_area .share_b:hover{ 138 opacity: 0.7; 139 transition: all .3s ease; 140 } 141 ul{ 142 padding:0; 143 width:98%; 144 font-size: 12px; 145 margin:0 auto; 146 147 } 148 .sogo_list,.kategori_list,.gozyu_list{ 149 width:100%; 150 list-style-type:none; 151 } 152 .sogo_list li,.kategori_list li,.gozyu_list li{ 153 width:100%; 154 height: 35px; 155 line-height: 35px; 156 /*border-bottom:0.3px solid rgba(200, 200, 200, 0.7);*/ 157 } 158 .sogo_list li a,.kategori_list li a,.gozyu_list li a{ 159 text-decoration:none; 160 color:black; 161 display: inline-block; 162 width:100%; 163 height:100%; 164 transition:all .3s ease-out; 165 position: relative; 166 167 } 168 .sogo_list li:first-child,.kategori_list li:first-child,.gozyu_list li:first-child{ 169 font-size:15px; 170 font-weight: 700; 171 height:40px; 172 line-height: 40px; 173 border-bottom:transparent; 174 background:rgba(90, 208, 118, 0.6); 175 color:white; 176 letter-spacing: 1.3px; 177 position: relative; 178 overflow: hidden; 179 text-shadow: 1px 2px 1px #333; 180 } 181 .sogo_list li:first-child::after,.kategori_list li:first-child:after,.gozyu_list li:first-child:after{ 182 display: inline-block; 183 content:''; 184 width:120%; 185 height:120%; 186 transform:rotateZ(160deg); 187 background:green; 188 position:absolute; 189 top:15px; 190 right:-50px; 191 z-index: -5; 192 opacity: 0.7; 193 } 194 #side_menu ul li a:hover{ 195 transition:all .3s ease-in; 196 background-color: rgba(220, 220, 220, 0.4); 197 } 198 #side_menu ul li a::after{ 199 display: inline-block; 200 content: ''; 201 position: absolute; 202 bottom:0; 203 left:0; 204 width:100%; 205 height:0px; 206 opacity: 0.4; 207 background: gray; 208 } 209 </style> 210</head> 211<body> 212 <nav> 213 <div id="side_menu"> 214 <div class="bar"></div> 215 <div class="side_wrapper"> 216 <h1>タイトル</h1> 217 </div> 218 <div id="share_area"> 219 <div class="share_b"><a href=""><img src="../IMG/CONP/twitter.png"></a></div> 220 <div class="share_b"><a href=""><img src="../IMG/CONP/facebook.png"></a></div> 221 <div class="share_b"><a href=""><img src="../IMG/CONP/google.png"></a></div> 222 </div> 223 <div class="sogo_nav"> 224 <ul class="sogo_list"> 225 <li></li> 226 <li><a href=""></a></li> 227 <li><a href=""></a></li> 228 <li><a href=""></a></li> 229 <li><a href=""></a></li> 230 <li><a href=""></a></li> 231 </ul> 232 </div> 233 <div class="katgori_nav"> 234 <ul class="kategori_list"> 235 <li></li> 236 <li><a href=""></a></li> 237 <li><a href=""></a></li> 238 <li><a href=""></a></li> 239 <li><a href=""></a></li> 240 <li><a href=""></a></li> 241 </ul> 242 </div> 243 <div class="gozyu_nav"> 244 <ul class="gozyu_list"> 245 <li></li> 246 <li><a href=""></a></li> 247 <li><a href=""></a></li> 248 <li><a href=""></a></li> 249 <li><a href=""></a></li> 250 <li><a href=""></a></li> 251 <li><a href=""></a></li> 252 <li><a href=""></a></li> 253 <li><a href=""></a></li> 254 <li><a href=""></a></li> 255 <li><a href=""></a></li> 256 </ul> 257 </div> 258 <div id="mail"><p><a href="">お問い合わせ</a></p></div> 259 260 </div> 261 </nav> 262 263 <script> 264 var Nav = document.querySelector("#side_menu"); 265 266 Nav.addEventListener("mouseover",function(){ 267 Nav.style.overflowY = "scroll"; 268 },false); 269 Nav.addEventListener("mouseout",function(){ 270 Nav.style.overflowY = "hidden"; 271 },false); 272 </script> 273</body> 274</html> 275 276
回答3件
0
#side_menu { overflow-x: hidden; } #side_menu_inner { width:200px; }
HTML
1<nav> 2 <div id="side_menu"> 3 <div id="side_menu_inner"> 4 <!-- 省略 --> 5 </div> 6 </div> 7</nav> 8```**動くサンプル：**[https://jsfiddle.net/4mhok173/](https://jsfiddle.net/4mhok173/)
投稿2017/05/12 09:48
総合スコア69398
0
ベストアンサー
ズレるって症状が出るんだと思ってやってみたのですが、win10のchrome,edge,firefoxで症状を確認できなかったので、スクロールバーを表示させるとその分表示幅が狭くなるって話ですか？
もし、そうであればスクロールバーの幅を計算してその分を足してやるとか。
他の環境で左にずれるのであれば、すみません。
投稿2017/05/12 08:23
総合スコア350
やはり、幅の変化による中央の変化ですからスクロールバーの幅の分だけ変化させてやればOKだと思います。サイズはこんな感じでもいいのでは。
var tgt = document.getElementById('side_menu');
var outerW = tgt.offsetWidth;
var innerW = tgt.clientWidth;
var barW = outerW - innerW;
マウスオーバー時にNav.style.width = 幅+スクロールバーの幅;に直したらできました！
こんな簡単な問題に回答してもらって申し訳ないです。
助かりました。ありがとうございます。
0
スクロールバーの表示、動作まで出来ているのであれば。
CSSだけの話ではないかと思いますが、ソースが無いんですね…
ありもののScriptでは、通常
CSS
1#side_menu { 2 z-index:1; 3 position:relative; 4} 5.sb {/* 名前はテキトー */ 6 z-index:100; 7 position:absolute; 8 right:0; 9 top:0; 10 width:5px;/* スクロールバーの幅 */ 11 height:100%; 12}
って感じになっていますが、同じではないかなと思います。
要するに、重ねずに、横に表示しちゃうからズレるという感じですかね。
投稿2017/05/12 06:40
総合スコア1084
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。