KotaroImai score 2
2018/07/10 17:26 投稿
| Mac上で、モーダルを開いた時のみ、その要素にスクロールバーを常時表示させたいと考えています。 |
| ・http://a-side-job.com/web_material/bar_css/ |
| この記事を参考にして、以下のコードを書いたのですが狙い通りには修正されませんでした。 |
| 修正方法わかる方よろしくお願いいたします。 |
| ```html |
| <body> |
| <!-- モーダルを開くためのリンク --> |
| <div> |
| <a class="modal-open">モーダルを開きます。</a> |
| </div> |
| <!-- モーダル自体 --> |
| <div class="modal"> |
| <!-- この要素のみスクロールバーを常時表示させる。 --> |
| <div class="modal_con">モーダル内要素</div> |
| <div class="modal_con">モーダル内要素</div> |
| <div class="modal_con">モーダル内要素</div> |
| </div> |
| </body> |
| ``` |
| ```css |
| .modal{ |
| width: 855px; |
| margin: 0 auto; |
| } |
| .modal_con{ |
| width: 257px; |
| float: left; |
| border: 1px solid #EBEBEB; |
| border-top: none; |
| } |
| <!-- 対策１：どこにも変化がない --> |
| .modal_con::-webkit-scrollbar { |
| -webkit-appearance: none; |
| width: 7px; |
| } |
| .modal_con::-webkit-scrollbar-thumb { |
| border-radius: 4px; |
| background-color: rgba(0,0,0,.5); |
| box-shadow: 0 0 1px rgba(255,255,255,.5); |
| } |
| <!-- 対策２：全てにスクロールバーがついてしまう。 --> |
| ::-webkit-scrollbar { |
| -webkit-appearance: none; |
| width: 7px; |
| } |
| ::-webkit-scrollbar-thumb { |
| border-radius: 4px; |
| background-color: rgba(0,0,0,.5); |
| box-shadow: 0 0 1px rgba(255,255,255,.5); |
| } |
| <!-- 対策3：どこにも変化ない --> |
| .modal::-webkit-scrollbar { |
| -webkit-appearance: none; |
| width: 7px; |
| } |
| .modal::-webkit-scrollbar-thumb { |
| border-radius: 4px; |
| background-color: rgba(0,0,0,.5); |
| box-shadow: 0 0 1px rgba(255,255,255,.5); |
| } |
| ``` |
