Webviewで横スクロールを実装したときにAndroidだと横スクロールが可能な部分でスワイプすると滑らかにスクロールされるが、iOSだと滑らかにスクロールできない。
通常だと以下のような挙動になってしまう。
上記は弊社で開発しているアプリのWebviewで実際に横スクロールを実装した画面です。
見る限りスクロールが滑らかではありません。
そこでcssで以下のコードを記入します。
-webkit-overflow-scrolling: touch;
このcssは指定された要素で惰性付きのスクロールを使用するかどうかを制御します。
デフォルトだとautoになっています。
autoだと通常のスクロールの場合、タッチパネルから指を離すとすぐにスクロールが停止します。
今回の場合はここをtouchに変更します。
touchだとスクロールが終了した場合、タッチパネルから指を離した後もスクロールを続けます。
指定すると以下のような挙動になります。
対応前と比べるとすごい滑らかにスクロールされていることがわかります。