【CSS】スマホでスクロールを滑らかにする方法(慣性スクロール)
みなさん、こんにちは。
「overflow-y: scroll;」などでスクロールできるボックスを作り、スマホで見た際にスクロールの使用感が悪く感じたことはありませんか？
そんな時に便利なCSSプロパティをご紹介します。
Contents
慣性スクロールにする方法
Webページをスマホで閲覧している時はスクロールに慣性が働き指を離してもスクロールは続きます。
ですが、「overflow-y: scroll;」などを指定しただけでは慣性スクロールにはなりません。
慣性スクロールがないサンプル
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
div {
width: 300px;
max-width: 100%;
height: 200px;
padding: 15px;
margin-left: auto;
margin-right: auto;
border: 1px solid #ccc;
background-color: #fafafa;
overflow-y: scroll;
}慣性スクロールがあるサンプル
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
以下のように一行追加するだけで慣性スクロールにすることができます。
div {
width: 300px;
max-width: 100%;
height: 200px;
padding: 15px;
margin-left: auto;
margin-right: auto;
border: 1px solid #ccc;
background-color: #fafafa;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}サンプルを見やすくするためにごちゃごちゃ書いていますが大事なのは以下の部分です。
div {
-webkit-overflow-scrolling: touch;
}まとめ
慣性スクロールが合った方が使い勝手がいいと思います。
ですので、スクロールするエリアを作る際は「-webkit-overflow-scrolling: touch;」を入れるように覚えとくことをおすすめします！
参考サイト
この記事が気に入ったらいいね！で
最新記事をお届けします
