WebviewにてiPhoneでの横スクロールを滑らかにする方法

1121 ワード
webView CSS3 CSS3 テキストリンク

Webviewで横スクロールを実装したときにAndroidだと横スクロールが可能な部分でスワイプすると滑らかにスクロールされるが、iOSだと滑らかにスクロールできない。
通常だと以下のような挙動になってしまう。

上記は弊社で開発しているアプリのWebviewで実際に横スクロールを実装した画面です。
見る限りスクロールが滑らかではありません。

そこでcssで以下のコードを記入します。

-webkit-overflow-scrolling: touch;

このcssは指定された要素で惰性付きのスクロールを使用するかどうかを制御します。
デフォルトだとautoになっています。
autoだと通常のスクロールの場合、タッチパネルから指を離すとすぐにスクロールが停止します。
今回の場合はここをtouchに変更します。
touchだとスクロールが終了した場合、タッチパネルから指を離した後もスクロールを続けます。

指定すると以下のような挙動になります。

対応前と比べるとすごい滑らかにスクロールされていることがわかります。