Tips!Macのブラウザでスクロールバーが表示されない

Macではスクロールバーの表示が以下の3パターンから選択できるのですが、

• マウスまたはトラックパットに基づいて自動的に表示
• スクロール時に表示
• 常に表示

「常に表示」を選択していないと、Bootstrap3 モーダルウィンドウ内のスクロールバーが表示されずに困りました。

対応策

基本的にCSSで-webkit-scrollbarを使用していると解決します。
以下の記述で、ブラウザの横にあるスクロールバーは既に表示されていました。

body::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
body::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

ただモーダルウィンドウ内にあるスクロールバーは表示されてくれません。
そこでスクロールをさせたい要素を指定して、

#articleArea::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
#articleArea::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

としてあげると、上手く表示されました。

蛇足

でも、モーダルウィンドウ内ではない、画面内の要素のスクロールバーはこの記述なしでも動作してたんですよね。
モーダルウィンドウ内にある要素だとbody::-webkit-scrollbarが効かず、それ以外の要素であれば効くのか。
それとも要素が生成されるタイミングの問題（ajaxと組み合わせているので）なのか。
それとも何か私が根本的に勘違いしているのか。
モヤモヤする点は残っているものの、とりあえず要素を指定して::-webkit-scrollbarをつけてあげれば問題は解決する！
と今のところは覚えておきます。

(byへびさん）