画像を1ページずつ並べて、電子書籍っぽくフリックでスクロールさせるUIを作りたかったのですが、スマートフォンのスクロール制御はPCと同じ気持ちでは上手く動いてくれません。

作ったもの

• どろぼう うさぎ
• GitHub

小学二年生の三女が描いた物語が面白かったので、絵本のような体裁に整えてみようと思ったのがきっかけです。 過去の自費出版経験を活かして書籍にすることも考えましたが、MyISBN では最低12ページないとダメなようで諦めました。

• Linuxコマンドを駆使して自費出版した話

やりたかったこと

電子書籍リーダー風のUI、具体的には1ページごとにスクロール位置をスナップしようと思っていました。 ただし、スクロール操作中はユーザ操作を優先してスナップさせない、というのも盛り込みたい。

結果としては上手くいきませんでした。

• どろぼう うさぎ（v1）

PCでは若干怪しい動きがあるものの、一応それっぽく動いています。 一方でスマートフォンではほとんど制御が効いていないように見えます。

上手くいかない原因

スマートフォンのスクロールとPCのスクロールの挙動の違いが主な原因と思われます。

最近では当たり前の動きなのですが、フリック操作でスクロールすると、指を離した後も惰性でスクロールが少し続きます。 PCだとマウスホイールが惰性でちょっと回ることはありますが、あくまでもホイールの惰性であり、スクロールの惰性ではありません。 つまり、惰性で動いている間の制御に対する考慮が足りない、ということだと思います。

ちなみにスクロールの制御は現在位置しか取得できないので、向きやスピード、ページとの位置関係などすべて制御しなければいけません。 おそらく、ユーザが操作していない間の惰性スクロールに介入する必要があり、ページの区切りに近いほどその影響を受ける、という制御が必要なのだと思います。

地味ですが思いのほか奥の深いテーマだったので、引き続き改善していこうと思います。

【追記】CSSで解決

ふとCSSで出来ないのか？という考えが浮かび、ググってみたらありました。

• CSSでスクロールスナップ(scroll-snap)の実装方法【デモ有】 | キノコログ

scroll-snap-type というCSSであれば、惰性スクロールそのものをコントロールすることができ、期待した動作になりました。

• どろぼう うさぎ（v3）

おそらく、ユーザが操作していない間の惰性スクロールに介入する必要があり、ページの区切りに近いほどその影響を受ける、という制御が必要なのだと思います。

ちなみに、CSSにたどり着く前、この方法も試しました。 初期バージョンはPCではそこそこ、スマホでは全然ダメでしたが、このバージョンはスマホでそこそこ、PCでは全然ダメです。 またスマホの挙動も、惰性スクロールの勢いをコントロールできないため、ピタッと止めることができていません。

• どろぼう うさぎ（v2）

結論としては、スマホの惰性スクロールはJavaScriptでは制御しようと思わない方がよいです。

謝辞

画像は Pixabay 様より使わせていただきました。