Q&A
前提・実現したいこと
スクロールバー分のズレをなくしたい。
クリックするとメニューが開かれて、表示が長くなるとスクロールバーが表示される形なっています。
スクロールバーが表示された瞬間にスクロールバー分だけ少しずれてしまいます。
最初からスクロールバーを表示はさせたくないです。
長くなったら表示されるような形にしたいです。
色々調べていたのですが、「ズレるのが嫌なら最初からスクロールバーを表示させておけばいい」みたいな記事ばかりで解決策が見つかりませんでした。
これは、もうどうしようもないことなんでしょうか？
分かる方、教えてください。よろしくお願いします。
html
1<!doctype html> 2<html> 3 4<head> 5 <meta charset="UTF-8"> 6 <link rel="stylesheet" href="menu.css" type="text/css"> 7 8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 9 <script> 10 $(function() { 11 $('.menu_1').each(function() { 12 $(this).on('click', function() { 13 $("+.submenu", this).slideToggle() 14 return false; 15 }); 16 $("+.submenu", this).hide(); 17 }); 18 }); 19 </script> 20</head> 21<body> 22 <ul class="menu"> 23 <li> 24 <div class="menu__item"> 25 <div class="menu_1">メニュー1（クリックで開く）</div> 26 <ul class="submenu"> 27 <li class="submenu__item"> 28 <a>サブメニュー1</a> 29 </li> 30 <li class="submenu__item"> 31 <a>サブメニュー2</a> 32 </li> 33 <li class="submenu__item"> 34 <a>サブメニュー3</a> 35 </li> 36 <li class="submenu__item"> 37 <a>サブメニュー4</a> 38 </li> 39 </ul> 40 </div> 41 </li> 42 <li> 43 <div class="menu__item"> 44 <div class="menu_1">メニュー1（クリックで開く）</div> 45 <ul class="submenu"> 46 <li class="submenu__item"> 47 <a>サブメニュー1</a> 48 </li> 49 <li class="submenu__item"> 50 <a>サブメニュー2</a> 51 </li> 52 <li class="submenu__item"> 53 <a>サブメニュー3</a> 54 </li> 55 <li class="submenu__item"> 56 <a>サブメニュー4</a> 57 </li> 58 </ul> 59 </div> 60 </li> 61 </ul> 62</body> 63</html>
css
1ul { 2 list-style: none; 3} 4 5.menu { 6 overflow: auto; 7 float: right; 8 height: 90vh; 9} 10 11.menu_1 { 12 border-bottom: solid 2px orange; 13} 14 15.submenu__item { 16 height: 100px; 17} 18
回答2件
0
ベストアンサー
もうどうしようもないことなんでしょうか？
スクロールバーはアプリケーション（ブラウザ）の実装の問題です。
OSのウィンドウシステムとも密に関係しているはずですし、ブラウザの開発者でもない限り、どうしようもないです。
Web文書の作者（開発者含む）は、ブラウザ挙動に合わせて「どのようにフェイクを入れるか」という対応しかできません。
その一案が「常時表示」です。
投稿2020/09/14 09:25
総合スコア5432
0
適切な幅を設定するというのではだめですか。
css
1.menu { 2 overflow: auto; 3 float: right; 4 height: 90vh; 5 width: 240px; 6}
投稿2020/09/13 17:07
総合スコア33715
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/09/16 12:00