みかづきブログ・カスタム

基本的にはちょちょいのほいです。

iOS15のSafariに搭載されたPull to Refresh(引っ張って更新)をtouchmoveのEvent.preventDefaultを実行にせずに強引に無効にする 📱

passiveをfalseにしてtouchmoveのEvent.preventDefaultを実行すれば、Pull to Refresh(引っ張って更新)を止めることができます。

documents.addEventListener('touchmove', function(evt) {
  evt.preventDefault();
}, {
  passive: false
});

今回は、touchmoveのEvent.preventDefaultをそのままに、Pull to Refreshを止める方法を模索します。

試したこと

❶ 画面全体をoverflow-y: scrollの要素で囲う
❷ overflow-y: scrollの要素をちょっとスクロールさせておく
❸ overflow-y: scrollの要素のスクロール位置を監視してscrollTopが0にならないようにする

の3点を実装することで、Pull to Refreshを強引に無効にすることができました。
overflow-y: scroll内の要素の高さがページ高さよりも大きいことが前提条件です。

React.js(Next.js)で実装してしまったので、ぱっと見でわからないのですが、ソースはこちらから確認できます。

github.com

Pull to Refreshは無効になるものの、その反動で、トップを超えるスクロールをしたときに、ものすごくガタガタするので使い所は限られそうです。

追記

https://kimizuka.github.io/next-scroll//disable-pull-to-refresh-in-ios15-with-bounce/

ガクガク感の解消のためにoverflow-y: scrollの要素を2重にしたところ、若干改善しました。
が。まだブルブルするので、やはり使い所は限られそうです。