要素内スクロールのmobile実装

[HAKASHUN]

アプローチ

1. iScrollのようなtranslateを用いた実装
2. overflow-scrolling: touchを用いた実装
3. 1と2のハイブリッド実装
   • https://github.com/filamentgroup/Overthrow

     参考文献(memo)

   • http://apdevblog.com/optimizing-webkit-overflow-scrolling/
   • http://stackoverflow.com/questions/15313570/ios-disable-page-scrolling-with-overflow-scrolling-touch
   • http://stackoverflow.com/questions/25294413/visible-scrollbars-ios-with-webkit-overflow-scrolling-touch
   • http://forum.ionicframework.com/t/overflow-scroll-ion-content/1382

[HAKASHUN]

iScrollのような実装

メリット

• スクロールバーを重い通りに実装できる
• 慣性スクロールを実装できる
• Android2系ではoverflow: scrollが効かないため、この実装でないと要素内スクロールを実現できない

デメリット

• 端末によって動作が安定しない
• スクロールの気持ちよさは、どう頑張ってもネイティブスクロールには勝てない

[HAKASHUN]

overflow-scrolling: touchの実装

メリット

• ネイティブのスクロールのため、動作が安定する
• iOSでは慣性スクロールが機能する
• Android4系でスクロールのパフォーマンスが良い

デメリット

• スクロールバーを制御しにくい
• Android2系では使えない