Geek Answers Handbook

Pulltorefresh.js - temporarily disable

I use this PullToRefresh plugin:

https://github.com/BoxFactura/pulltorefresh.js#api

It works well, but I have a popup on my page with a scrollable div. The problem is that when I want to scroll up (in a div), PullToRefresh is triggered. Is it possible to “delete” or temporarily disable PullToRefresh when a popup window opens?

PullToRefresh.init({ mainElement: 'body', onRefresh: function(){ refreshAll(); } });

edit: delete PullToRefresh; //does not work

edit2: https://github.com/BoxFactura/pulltorefresh.js/blob/master/dist/pulltorefresh.js

+7
javascript pull-to-refresh
source share
2 answers

PullToRefresh.init() returns an object with the destroy() function as a callback: https://github.com/BoxFactura/pulltorefresh.js/blob/master/dist/pulltorefresh.js#L326

 var refresher = PullToRefresh.init({ mainElement: 'body', onRefresh: function(){ refreshAll(); } }); // destroy the PullToRefresh EventListeners when you open your popup refresher.destroy()

There is also an open Github issue about improving the way to destroy this library after initialization: https://github.com/BoxFactura/pulltorefresh.js/issues/22

+6
source share

IMO there are two reasonable ways to do this.

You can define triggerElement and place your overlay outside of this triggerElement element:

 PullToRefresh.init({ mainElement: 'body', triggerElement: '#mainContent', onRefresh: refreshAll });

with the same markup

 <body> <div id="containerForOverlays"></div> <div id="mainContent"></div> </body>

This way, everything inside #containerForOverlays will not trigger the update.

Or you can use the new hook shouldPullToRefresh() if your version already supports it.

An example where PullToRefresh depends on the checked flag

 <label><input id="refresh" type="checkbox"> Pull to Refresh?</label>

using it like

 PullToRefresh.init({ mainElement: 'body', shouldPullToRefresh: function(){ return document.getElementById('pullToRefresh').checked }, onRefresh: refreshAll });

Of course, I do not suggest using a checkbox in your production code. I just wanted to show how you could dynamically turn PullToRefresh on and off. In this example, depending on the checkbox that you want to check.

You need to implement the correct shouldPullToRefresh() for your application to determine if it should be PullToRefresh active or not.

0
source share

More articles:


All Articles