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

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

iOS15のmobile Safariに搭載されたPull to Refresh(引っ張って更新)を強引に無効にする 📱

f:id:kimizuka:20201009231253p:plain

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

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

f:id:kimizuka:20210922153825g:plain

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

github.com

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

追記

f:id:kimizuka:20210922224248g:plain

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

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