質問編集履歴

1 タイトルをわかりやすく変更。

KotaroImai

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;
}
<!-- 対策1:どこにも変化がない -->
.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);
}
<!-- 対策2:全てにスクロールバーがついてしまう。 -->
::-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);
}
```
  • HTML

    11434 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    7516 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    5101 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • WebKit

    31 questions

    WebKitはAppleのSafariとAndroid, iOS, RIM Blackberry, SymbianとWebOSを含むインストール済みのモバイルブラウザの動力となっているオープンソースのウェブブラウザエンジンです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る