How to Prevent Pull-Down-To-Refresh of Mobile Chrome

Disabling android's chrome pull-down-to-refresh feature

The default action of the pull-to-refresh effect can be effectively prevented by doing any of the following :

1. preventDefault’ing some portion of the touch sequence, including any of the following (in order of most disruptive to least disruptive):
   
   
   • a. The entire touch stream (not ideal).
   • b. All top overscrolling touchmoves.
   • c. The first top overscrolling touchmove.
   • d. The first top overscrolling touchmove only when 1) the initial touchstart occurred when the page y scroll offset was zero and 2) the touchmove would induce top overscroll.
2. Applying “touch-action: none” to touch-targeted elements, where appropriate, disabling default actions (including pull-to-refresh) of the touch sequence.
3. Applying “overflow-y: hidden” to the body element, using a div for scrollable content if necessary.
4. Disabling the effect locally via chrome://flags/#disable-pull-to-refresh-effect).

See more

Disable pull-to-refresh in iOS 15 Safari

Ths 2013 library called iNoBounce (https://github.com/lazd/iNoBounce) actually still does the trick pretty well on iOS 15.

Straightforward replication of the example in the documentation did disable the pull to refresh.

R shiny mobile app: prevent PullToRefresh

You might want to change your css part to: html,body{overscroll-behavior-y: contain;}, see https://stackoverflow.com/a/42509310/3502164.

Then it works for me on my mobile (android chrome).

Reproducible example:

library(shiny)
library(shinyMobile)
app <- shiny::shinyApp(
  ui = f7Page(
    tags$style(type='text/css', 'html,body{overscroll-behavior-y: contain;}'),
    f7Card(
      h5('try to pull to refresh. Normally it should not work.')
    )
  ),
  server = function(input, output) {}
)

# use host config to access app from mobiles in the same network
shiny::runApp(appDir = app, host = '0.0.0.0') 

---

Related Topics