iOSでスクロールバーが出ない時の対処法

CSS

2021年05月13日 2019年01月22日

スクロールさせるレイアウトの場合、
高さを固定してはみ出した分は


<div>
    <p>スクロールのレイアウトです</p>
    <p>スクロールのレイアウトだよ</p>
    <p>スクロールのレイアウトだってば</p>
    <p>スクロールのレイアウトだってばよ</p>
    <p>スクロールのレイアウトだってんだ</p>
</div>

<div>

スクロールのレイアウトです

スクロールのレイアウトだよ

スクロールのレイアウトだってば

スクロールのレイアウトだってばよ

スクロールのレイアウトだってんだ

</div>


div{
    height: ○○px;
    overflow: auto;
}

div{

height: ○○px;

overflow: auto;

}

とすればスクロールバーが表示される仕組みです。

ところがタッチデバイスの場合はスクロールバーが表示されず
ユーザーにスクロールできるエリアだとわかりにくかったり、
いざスクロールするときスムーズに動かなかったりします。

タッチデバイス対策で、以下のCSSを加えることをオススメします。


div{
    /* スクロールをスムーズにする */
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

div{

/* スクロールをスムーズにする */

-webkit-overflow-scrolling: touch;

overflow-scrolling: touch;

}