search

monlovesmango / astral

Nostr client made with Quasar
https://astral.ninja
MIT License
100 stars 38 forks source link

Prevent pull down to refresh page on Chromium based mobile browsers #85

Open SuperPhatArrow opened 1 year ago

SuperPhatArrow commented 1 year ago

When swiping down to scroll up at the top of the page, Chromium based mobile browsers (e.g. Chrome, Brave) default action is to refresh the entire site. This is not good behaviour for Astral as it has to fetch all new data from relays.

It can be overridden with the following CSS:

html { overscroll-behavior-y: contain; }

Reference

SuperPhatArrow commented 1 year ago

@monlovesmango I think that inserting this into MainLayout.vue would do the trick.

monlovesmango commented 1 year ago

thank you for this! I agree. I want to figure out how to capture this action and direct it do to something else, like reload/reset the UI but not completely reload the page. or even load unread feed events. do you have tips around this? if not no worries but if so it would prob help me implement faster.

SuperPhatArrow commented 1 year ago

Yes, it must be possible because the Twitter PWA does it. I will look into it, I imagine it will be adding an event listener to the element. I'll report back soon.

SuperPhatArrow commented 1 year ago

Ok I have figured it out and put together an ugly demo for you to try on your phone. 

html, body { overscroll-behavior-y: contain; }

I needed to add body to the CSS to cancel the refresh.

All code is here including some overly commented JS which will hopefully explain everything! Any questions, please let me know.

monlovesmango commented 1 year ago

oh wow thank you so much for this! will def put this in the next major release!!