javascript - pulltorefresh.js - Disable temporarily

I am using this PullToRefresh plugin:

.js#api

It works well but I have a popup on my page with div inline scroll. The problem is that when I want to scroll up (in the div) the PullToRefresh is triggered. Is it possible to "delete" or to temporarily disable the PullToRefresh when my popup is opened?

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

edit: delete PullToRefresh; // does not work

edit2: .js/blob/master/dist/pulltorefresh.js

I am using this PullToRefresh plugin:

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

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

edit: delete PullToRefresh; // does not work

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

Share Improve this question edited Aug 10, 2017 at 0:34 liam 2,0143 gold badges23 silver badges28 bronze badges asked Jul 31, 2017 at 23:43 Peter 11.9k31 gold badges101 silver badges155 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 8 +250

PullToRefresh.init() will return an object with a destroy() function as callback: https://github./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's also an open Github issue about improving the way to destroy this library after initialization: https://github./BoxFactura/pulltorefresh.js/issues/22

IMO there are two reasonable ways to do this.

You can define a triggerElement and put your overlay outside of this triggerElement:

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

with a markup somewhat like this

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

that way, everything inside of #containerForOverlays won't trigger a refresh.

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

An example where PullToRefresh depends on a checkbox to be checked

<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'm not suggesting that you use 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 to be checked.

It's up to you to implement the correct shouldPullToRefresh() for your application to determine wether PullToRefresh should be active or not.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - pulltorefresh.js - Disable temporarily - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)