テーブル内スクロールを実現しようとしてハマった

テーブル内スクロールを実現しようとしてハマった。

• macでスクロールバーが常に表示されない（スクロールできるかわからないため、見逃される可能性が高い）
• スクロール時に枠線がずれる

macでスクロールバーが常に表示されない

css

overflow-y: scroll;

を指定すればいいと思っていたが、macだと設定が効かない。

以下のように特別対応する必要があるらしい。

css

/* macでスクロールバーを常に表示する */
table ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
table ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

別にデザインを入れる必要性まであるのかはわからないけど、デバッグが面倒なのでここまでの理解にしておこう。

スクロール時に枠線がズレる

以下を見て解決。
http://bashalog.c-brains.jp/18/04/03-110000.php

scrollバーのせいで幅がズレるため、 widthと同じ値を min-widthに設定すれば良いとのこと。