The effect of pull-to-refresh and suggested solution to it

MEANING OF ''PULL-TO-REFRESH''

Pull-to-refresh is a visceral gesture that is popularized by apps such as Facebook and Twitter. Pulling down on a feed and releasing creates new space for more recent posts to be loaded. it become so popular that mobile browser 'Chrome' on Android adopted the same effect in which swiping down at the top of the page refreshes the whole pages.

THE PULL-TO-REFRESH EFFECTS

pulling-to-refresh has an effect on the platform in which it give a lot of problem to members . When you pull down to refresh, it take a very long period of time to refresh the entire page, not only because of service network but also because of the effectiveness of the pull-down-to-refresh gesture. This gesture also give the problem of taking the user of the platform to an unknown site.
For situations like the Twitter, it might make sense to disable the native pull-to-refresh action because in this app, you probably don't want the user to to accidentally refresh tparticular he particular page. There is also the potential to see a double refresh animation! Alternatively, it might be nicer to custom the browser's action, aligning it more closely to the site's branding. The unfortunate part is that this type of customization has been tricky to pull off. Developers end up writing unnecessary JavaScript, add non-passive touch listeners (which block scrolling). These works have being well documented negatively in which havely in which have effects on the the scrolling performance.

SUGGESTED SOLUTION

The introduction of ''overscroll-behavior''

The overscroll-behavior property allows the the developersto override the browser's default overflow scroll behavior when reaching the top/bottom of content. Use cases include disabling the pull-to-refresh feature on mobile, removing overscroll glow and rubberbanding effects, and preventing page content from scrolling when it's beneath a modal/overlay.

The property is a new feature that I personally have learnt on my research work inwhich will help in developing the pull-to-refresh gesture. The new features controls the behavior of what happens when you over-scroll a container (including the page itself). It can to used to cancel scroll chaining, disable/customize the pull-to-refresh action. The best part of this suggestion is that using overscroll-behavior does not adversely affect the entire page performance.

The property takes three possible values:

1. Auto - This also refers to what is called ''default''. Scrolls that originate on the element may propagate to ancestor elements.
2. Contain - This will prevent scroll chaining. Scrolls in this value do not propagate to ancestors but local effects within the node are shown. For example, the rubberbanding effect on the iOS which notifies the user of the platform when they hit a scroll boundary. Note: using overscroll-behavior: contain on the html element prevents overscroll navigation actions.
3. None - This is also the same as contain but it also prevents overscroll effects within the node itself (For example, Android overscroll glow or iOS rubberbanding).

---

Posted on Utopian.io - Rewarding Open Source Contributors

---