Mac上で、モーダルを開いた時のみ、その要素にスクロールバーを常時表示させたいと考えています。
・http://a-side-job.com/web_material/bar_css/
この記事を参考にして、以下のコードを書いたのですが狙い通りには修正されませんでした。
修正方法わかる方よろしくお願いいたします。
html
1<body> 2 <!-- モーダルを開くためのリンク --> 3 <div> 4 <a class="modal-open">モーダルを開きます。</a> 5 </div> 6 <!-- モーダル自体 --> 7 <div class="modal"> 8 <!-- この要素のみスクロールバーを常時表示させる。 --> 9 <div class="modal_con">モーダル内要素</div> 10 <div class="modal_con">モーダル内要素</div> 11 <div class="modal_con">モーダル内要素</div> 12 </div> 13</body>
css
1.modal{ 2 width: 855px; 3 margin: 0 auto; 4} 5.modal_con{ 6 width: 257px; 7 float: left; 8 border: 1px solid #EBEBEB; 9 border-top: none; 10} 11<!-- 対策1:どこにも変化がない --> 12.modal_con::-webkit-scrollbar { 13 -webkit-appearance: none; 14 width: 7px; 15} 16.modal_con::-webkit-scrollbar-thumb { 17 border-radius: 4px; 18 background-color: rgba(0,0,0,.5); 19 box-shadow: 0 0 1px rgba(255,255,255,.5); 20} 21<!-- 対策2:全てにスクロールバーがついてしまう。 --> 22::-webkit-scrollbar { 23 -webkit-appearance: none; 24 width: 7px; 25} 26::-webkit-scrollbar-thumb { 27 border-radius: 4px; 28 background-color: rgba(0,0,0,.5); 29 box-shadow: 0 0 1px rgba(255,255,255,.5); 30} 31<!-- 対策3:どこにも変化ない --> 32.modal::-webkit-scrollbar { 33 -webkit-appearance: none; 34 width: 7px; 35} 36.modal::-webkit-scrollbar-thumb { 37 border-radius: 4px; 38 background-color: rgba(0,0,0,.5); 39 box-shadow: 0 0 1px rgba(255,255,255,.5); 40}
あなたの回答
tips
プレビュー