if you test out the demos in chrome you will see this in the console:

Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

https://www.chromestatus.com/features/5093566007214080

states that chrome treats touch events as passive by default to avoid scroll delays.

The fix would be to add the { passive: false } option to any addEventListener calls the could use preventDefault()

Great plugin.

Just wondering how I can selectively target multiple containers to have this functionality.

Lets say my app has a UI as follows:
page 1) landing page with a list of products
page 2) detail view of list of products (open when user clicks on list from page 1)
page3) list of colour options for the product (opened from a button within page 2)

Lets say I want the pulltorefresh function on the list in page 1 and in page 3, but it shouldn't work on page 2.

I can't seem to enter multiple selectors in the mainElement option. I also notice multiple css tags are ignored (for example setting mainElement: 'body.page1, body.page2' doesn't work.

demo can not use too

Hi there, I have a div with a PTR instance on it. If I use the touch tools in Chrome Dev to drag to scroll, If I've scrolled down a bit, And then try to scroll back up because of the downword pull motion to scroll it triggers the PTR action. Is it at all possible to write a function / fix this so that the PTR action only happens if the current container's scrollpos is at 0 on the y axis? Thanks!

I ran into an issue where I have 2 lists side by side, one with pull to refresh one without. When the list with pulltorefresh is sitting at the top of it's scroll the second list wont respond to scroll up. Digging deeper I saw that the events for touch are wired to the window object so that is causing the problem. If I hook the eventlisteners to the triggerelement it works as expected.

Bug report

Current behavior:
Scrolling upwards using touch doesn't work. Tried on laptop with touch-display and on Android-phone. There is no error in the console.

Expected behavior:
That scrolling works with touch like previous versions.

JSFiddle URL for demo with bug:

Browsers affected:
Chrome

There's a closed issue regarding this bug. I created this issue because the bug hasn't been solved and there is no reason to close the isusue.
#64

The latest version of pulltorefreshjs on npm is 0.1.1 : https://www.npmjs.com/package/pulltorefreshjs

Could you publish version 0.1.3 ?

does it support react or preact

I'm using the pulltorefreshjs in the react app.

Problem: It is not intit correctly again if you destroy it while working (The top refrshing bar is showing).

My environment:
React:16.3
Browser: Chrome

The example code:

import React from 'react';
const PullToRefreshJS = require('pulltorefreshjs');


class SomeList extends React.Component {
  constructor(props){
    super(props);
  }
  componentDidMount(){
    this._refreshEngine = PullToRefreshJS.init({
      onRefresh: function() {
        //do some action
      },
      shouldPullToRefresh: () => {
        return !document.body.querySelector(options.mainElement).scrollTop;
      },
      ...options,
    });
  }
  componentWillUnmount(){
    this._refreshEngine.destroy();
  }
}

In the above scenario SomeList component unmounting and destroy pulltorefreshjs. When you unmount the SomeList component quickly while pulltorefreshjs is still working you cannot init pulltorefreshjs correctly again.
The pulltorefresh is initialized again (see componentDidMount) but the onRefresh method is not called any more. I have to close the app and restart it again to make it work.

What do you suggest to make it work ?

Thank you in advance.
Mariusz

If I pull my page while "onloading" will trigger this issue:

Cannot read property 'style' of null
at _onTouchEnd (pulltorefresh.js:244)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4740)
at ZoneDelegate.invokeTask (zone.js:420)
at Zone.runTask (zone.js:188)
at ZoneTask.invokeTask [as invoke] (zone.js:496)
at invokeTask (zone.js:1517)
at globalZoneAwareCallback (zone.js:1543)

I have just include this in my project it working fine when swipe but while scrolling the page up it will keep hanging but works fine while scrolling down

 PullToRefresh.init({
	mainElement: '.PageBodyContainer ',
	shouldPullToRefresh: function() {
		console.log(document.querySelector('#contentdivid').scrollTop);
		return (document.querySelector('.PageBodyContainer').scrollTop === 0);
	},
	instructionsPullToRefresh: '<img src="/ajax-loader.gif"/>',
	instructionsReleaseToRefresh: '<img src="/ajax-loader.gif"/>', 
	instructionsRefreshing: '&nbsp;',
	iconRefreshing: '<img src="/ajax-loader.gif"/>',
	onRefresh: function() { 
		console.info('refresh') 
	}
  });

Hello,

is it possible to customize the look of pulltorefresh.js? I like this library and it works very well, however I would like to have more of an Android look (see screenshot below) for a progressive web app that I am developing.

I use the pulltorefresh.js lib, and find a bug. Sometimes the _onTouchEnd event not trigger so the page don't repaint. I'm not sure is there a bug or the way i use is not correct.
https://code.google.com/p/android/issues/detail?id=19827
http://blog.mobiscroll.com/working-with-touch-events/

the console is not print. the page is not repaint.
the page address: http://test.platform.gamebean.net/bbs/default/index.html#/post_detail/daf50f86-54d7-440a-8c02-792adf68be77

Hello, is there any way for me to perform the refresh only when I'm at the top of the page? As it stands the app reloads anytime I try to scroll down on the mobile web app.

Thanks for any help.

Not really an issue but the creator told me to comment and I'm new here so this is the only space I can find. Please direct me elsewhere if It needs to live in a different section.

1. I am trying to change the color of the text for the pull down to black or white depending on the page.
2. I need to adjust the starting height of the pull down so that it starts at my App header (right now it hides underneath it.

any help on these two things would be amazing

This plugin works fine on browser, but when it comes to mobile devices it behaves weird. When we re on the bottom or middle and want to go up by screen touching the refresh method fire. Do you have any solution for that issue ?

if multiple div need pull refresh, how to do? it doesnt work on multiple element in one page.

<div id="main"> <button id="test" onclick="test1();">test</button> <button id="test" onclick="test1();">test</button> <button id="test" onclick="test1();">test</button> <button id="test" onclick="test1();">test</button> <div>dsfsd</div> <div>dsfsd</div> <div>dsfsd</div> <div>dsfsd</div> <div>dsfsd</div> <div>dsfsd</div> <div>dsfsd</div> <div>dsfsd</div> </div> <div id="main2"> <button id="test" onclick="test1();">test</button> <button id="test" onclick="test1();">test</button> <button id="test" onclick="test1();">test</button> <button id="test" onclick="test1();">test</button> <div>dsfsd</div> <div>dsfsd</div> <div>dsfsd</div> <div>dsfsd</div> <div>dsfsd</div> <div>dsfsd</div> <div>dsfsd</div> <div>dsfsd</div> </div> <script src="js/pulltorefresh.min.js"></script> <script> PullToRefresh.init({ mainElement: '#main', onRefresh: function() { alert('refresh') } }); PullToRefresh.init({ mainElement: '#main2', onRefresh: function() { alert('refresh') } }); </script>

I find the refreshing alert will disappear when refreshTimeout. How can I make refeshing display when refresh done? onRefresh is an ajax function can I callback?

Hello,
2 minutes ago I built a Firefox extension that injects on Android on all pages your JS script and it is AWESOME!!! I'm working on a name and icon now. The addon is still unlisted.

Can I use them from your site or should I pick a name/icon for myself? Can I remix your icon?

Regardless of your answer I will give credit where credit is due :D
I will publish my addon as Free Software on GitHub. Will link it from here.

People over at https://bugzilla.mozilla.org/show_bug.cgi?id=1162150 will be very happy :D

Thank you again for building this awesome JS library :D

My code is:

        PullToRefresh.init({
            distMax: 120,
            mainElement: '#main',
            passive: true,
            refreshTimeout: 200,
            onRefresh: function (done) {
               //something else
            }
        });

while it was refreshing, quickly navigate to another page.

And navigate back, touch anywhere, will trigger this issue:

Cannot read property 'shouldPullToRefresh' of undefined

My code is at
Github.com/AiursoftWeb/Kahla.App

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ApiService } from '../Services/ApiService';
import { ContactInfo } from '../Models/ContactInfo';
import { Router } from '@angular/router';
import { AppComponent } from './app.component';
import { DatePipe } from '@angular/common';
import { CacheService } from '../Services/CacheService';
import * as PullToRefresh from 'pulltorefreshjs';
import { Action } from 'rxjs/scheduler/Action';

@Component({
    templateUrl: '../Views/conversations.html',
    styleUrls: ['../Styles/conversations.css']
})
export class ConversationsComponent implements OnInit, OnDestroy {
    public info: ContactInfo[];
    constructor(
        public apiService: ApiService,
        public router: Router,
        public cache: CacheService) {
        AppComponent.CurrentConversation = this;
        if (this.cache.GetConversations()) {
            this.info = this.cache.GetConversations();
        }
    }
    public ngOnInit(): void {
        PullToRefresh.destroyAll();
        PullToRefresh.init({
            distMax: 120,
            mainElement: '#main',
            passive: true,
            refreshTimeout: 200,
            onRefresh: function (done) {
                AppComponent.CurrentConversation.init(AppComponent.CurrentConversation, function () {
                    done();
                });
            }
        });
        this.init(this, null);
    }

    public init(component: ConversationsComponent, callback: () => void) {
        component.apiService.MyFriends(false)
            .map(t => t.items)
            .subscribe(info => {
                component.info = info;
                component.cache.UpdateConversations(info);
                AppComponent.CurrentNav.ngOnInit();
                if (callback != null) {
                    callback();
                }
            });
    }

    public detail(info: ContactInfo): void {
        if (info.userId == null) {
            this.router.navigate(['/kahla/group', info.conversationId]);
        } else {
            this.router.navigate(['/kahla/user', info.userId]);
        }
    }

    public talk(id: number): void {
        PullToRefresh.destroyAll();
        this.router.navigate(['/kahla/talking', id]);
    }

    public ngOnDestroy(): void {
        PullToRefresh.destroyAll();
        AppComponent.CurrentConversation = null;
    }
}

when I use pulltorefresh.min.js
pull down is OK!
But scrolling up will have errors

When I use I use pulltorefresh.js , every thing is OK.

I think the min.js may have some errors?

var ele = document.querySelector("#wrapper") PullToRefresh.init({ mainElement:"#wrapper", shouldPullToRefresh: function() { return (ele.scrollTop === 0); } })
I have tried set shouldPullToRefresh,but it don't work

so,I tried another way

handleScroll:function (event) { console.log(event.touches); var hei = event.touches[0].pageY; console.log(hei < window.screen.height); PullToRefresh.init({ mainElement:"#wrapper", shouldPullToRefresh:function(){ return(hei < window.screen.height ) }, instructionsPullToRefresh:"下拉刷新", instructionsRefreshing:"正在刷新中" }) },
window.addEventListener("touchstart",this.handleScroll,true)

when it was false and I pull down, It still refresh. my phone screen can not be pulled down and then ,it refresh

Hello,
if like me you need to delete the ptr node when you start pulling down without refreshing, in the source file, in the _onTouchEnd () function, modify:

`function _onTouchEnd() {
if (!(_el && _el.ptrElement && _shared.enable)) {
return;
}

  if (_shared.state === 'releasing' && _shared.distResisted > _el.distThreshold) {
    _shared.state = 'refreshing';

    _el.ptrElement.style[_el.cssProp] = (_el.distReload) + "px";
    _el.ptrElement.classList.add(((_el.classPrefix) + "refresh"));

    _shared.timeout = setTimeout(function () {
      var retval = _el.onRefresh(function () { return _ptr.onReset(_el); });

      if (retval && typeof retval.then === 'function') {
        retval.then(function () { return _ptr.onReset(_el); });
      }

      if (!retval && !_el.onRefresh.length) {
        _ptr.onReset(_el);
      }
    }, _el.refreshTimeout);
  } else {
    if (_shared.state === 'refreshing') {
      return;
    }
    _el.ptrElement.style[_el.cssProp] = '0px';

    _shared.state = 'pending';
_ptr.onReset(_el); // add this here
  }

  _ptr.update(_el);

  _el.ptrElement.classList.remove(((_el.classPrefix) + "release"));
  _el.ptrElement.classList.remove(((_el.classPrefix) + "pull"));

  _shared.pullStartY = _shared.pullMoveY = null;
  _shared.dist = _shared.distResisted = 0;
}`

If you have a deeply nested dom, (bad idea, I know), it is possible for the function _closestElement to fail to find the triggerElement as in a parent node of the event.

Since _closestElement only walks 10 nodes up the tree, if a node is 11 or more steps away from the refresh container, then pulling down on that element will not trigger the pull to refresh because the function will believe that the target of the touchStart is not a child of the refresh container.

I solved this by adding a lookupDepth to the options, and passing that into the _closestElement function. In my app, after a cursory search, the deepest node is 19-20 deep, and so I set it at 25 just to be safe. This is however, confusing and not intuitive.

A better solution might be to listen to touch events on the triggerElement. I'm not sure of the intricacies of this for cross browser support, but I'd be happy to work on a PR given your feedback and direction.

My app is here:
https://github.com/AiursoftWeb/Kahla.App

Today I have just updated all dependencies to the latest version and my app just could run.

Every operation with pulltorefresh package returns an error as:

PullToRefresh.destroyAll is not a function
PullToRefresh.init is not a function

I guess the problem happens from the package itself.

My code is here

https://github.com/AiursoftWeb/Kahla.App/blob/master/src/app/Controllers/conversations.component.ts#L27

I've noticed that the project uses min-height in order to create the visual effect of the refresh bar. This work perfectly but isn't as performatic for animation as GPU-enabled properties like transform for example.

Perhaps a good approach for better FPS on animations would be to use translate3d() on both body and refresh bar instead of min-height?

I'm using this as a "pull to close" in an ember application and need to be able to tear it down and reinitialize. What's the correct way to do this? Currently, I'm doing this... Comments added to clarify if you don't have Ember experience.

export default Ember.Component.extend({
	// Inserts HTML component/element
	didInsertElement() {
		const refresher = PullToRefresh.init({
			mainElement: 'body',
			instructionsPullToRefresh: 'Pull to Close',
			instructionsReleaseToRefresh: 'Release to Close',
			instructionsRefreshing: 'Closing...',
			onRefresh: () => {
				// Triggers applicatoin navigation where the refresh element is no longer needed and is removed firing the `willDestroyElement` hook
				this.attrs.pullAction();
			}
		});
		
		// Just a holder inside the component.
		this.set('refresher', refresher);
	},
	
	// Triggered when the application removes the component/element
	willDestroyElement() {
		// I've also tried `PullToRefresh.destroy()` here.
		this.get('refresher').destroy();
	}
});

It looks like in the upgrade to 0.14 the NPM module no longer has an export in it, but instead just defines a variable:

bc3adb3#diff-43757bd0eb07f11dd4e8e579643e30eb

Consequently if I attempt to import the module doing something like this:

let ptrjs = require('pulltorefreshjs');

ptrjs will be undefined.

It seems it is not properly configured and npm auto-updated the dependencies (this is why we should use package-lock.json and npm ci).

https://travis-ci.org/BoxFactura/pulltorefresh.js/builds/425531162

In the NPM version, shouldPullToRefresh is not available.

Hello,

This plugin spits out a lot of errors in my console. IF I don't enable passivemode I get:
[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

If I enable passive mode I get the following:
Unable to preventDefault inside passive event listener invocation.

I think you should never try to prevent a touchmove event...

Hiya, sorry this isnt a bug per-say, but I've been using this on my PWA app and was wondering if there is a way to call a function when you've fully scrolled down, as I wanted to add a window.navigator.vibrate. I had a look through your code but I couldn't figure out a simple way to add it, as I'm not that experienced with Javascript.

When fingers slide up, they will not be able to slide down and report wrong (Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted)

I need your help, thank.

Bug report

In our mobile app, after upgrading from 0.1.14 to 0.1.16,
the scrollbar will trigger the onRefresh handler every time users touch and drag up even though the view is not at the very top.

I believe the code here makes trouble, the this.mainElement.scrollTop always return 0 each time scroll to be dragged up. However, using the old way, it works fine.

shouldPullToRefresh: function shouldPullToRefresh() {
      return typeof this.mainElement === 'string' ? !document.querySelector(this.mainElement).scrollTop : this.mainElement && !this.mainElement.scrollTop;
      // return !window.scrollY
    },

Current behavior:
Calling refresh handler every time when scrolling up the page.
Expected behavior:
Not calling refresh handler when each time scroll up.

JSFiddle URL for the demo with bug:
This bug can be reproduced by tweaking the demo which is multiple.html, looks like the demo still using the old version, by replacing the pulltorefresh.js with the latest 0.1.16, the issue can be observed
https://jsfiddle.net/bqc3jnds/
Browsers affected:
Chrome dev tool in mobile mode and real devices

Hey there! Has anyone attempted to implement desktop or mouse support? I imagine that it would be at least slightly contentious due to altering default scroll behavior; however, I'm sure there's a good way to make it fluid and work properly.

May take a look myself later today, but thought I'd see what others think

I am trying to use this pull to refresh, but im having an issue. I've looked for other issues like this, but didnt found any answer that solve my problem, so I submited this issue. I tried with 0.1.14 and 0.1.17 versions and none worked. My app is built using cordova and i tested both in mobile and browser.

Bug report

Current behavior:
When i scroll, my app refresh.

Expected behavior:
My app refresh only its on top.

** for demo with bug:**
https://jsfiddle.net/L4dypo8n/

Browsers affected:
Google chrome / android

0.1.12 introduced an error that makes it unusable in Ember 3.0 (didn't test 3.1 yet). Unfortunately the commit is too long to find the proper line, but the effect is

ember-console.js:29 Unhandled error: TypeError: Cannot read property 'commit' of null
renderer.js:167 Uncaught Error: infinite rendering invalidation detected

Basic example to reproduce (anybody knows how to set up an JSFiddle (or similar) with Ember etc.? Sorry):

//app/components/pull-to-refresh.js
import Component from '@ember/component';
import PullToRefresh from 'npm:pulltorefreshjs';

export default Component.extend({

  classNames: ['pull-to-refresh'],

  didInsertElement() {
    this._super(...arguments);

    PullToRefresh.init({
      mainElement: '.pull-to-refresh',
      });
  },
});

// app/templates/some-view.hbs
<div class="some-view">
    {{#pull-to-refresh}}
        ...
    {{/pull-to-refresh}}
</div>

The view some-view can be opened with v0.1.11, cannot be opened with v0.1.12

If _setupEvents function is intended to be called only once, _setup should be used for checking?

I'm experiencing an issue when I toggle between two pages in my app. The first page has the pull to refresh feature, the second page does not have this feature so when the user navigates to the second page, I invoke the destroy method to remove the listeners. But when I scroll on the second page, I get an error

TypeError: Cannot read property 'classList' of undefined at _onTouchMove

and all of my content disappears.

Bug report

Current behavior:
Pulltorefresh stops working all together if destroyed while running. In my setup the issue occurs if the user navigates to another route (navigating destroys pulltorefresh-instances) while pulltorefresh still is working on the users current route. This is in the context of an SPA built with Vue.js. At the moment I have to restart the entire application for pulltorefresh to work again. There is no errors in the console.

Expected behavior:
That it gracefully releases held element back to top and upon new init it works again.

JSFiddle URL for demo with bug:

Browsers affected:
All

There is an issue describing this very behaviour which was supposed to be fixed in 0.1.16 but I still experience this in 0.1.16: #57

Hi, I got an issue with pulltorefresh, I got the trigger in a especific content, but my scroll (just to up) stops working in the whole page except in the trigger content.

If I set the defaults options, when the scroll is at the end of the page and I want to get to the top, I just scroll just a short time and the page is updated. Is there a way to just update only when I am on the top of the page?

• I'm using it in a mobile device.

Is there a way to manually fire pull to refresh, rather than waiting for the user? I'm thinking of a UX use case, so the user opens a list and sees it refreshing, therefore is aware of it's existance

On Firefox, there is a bug on the "Should pull to refresh?" demo.

Clicking on the checkbox triggers the pull to refresh. Here's a video showing the bug: https://streamable.com/mbpcg

I am not keeping the mouse button pressed, I just click one time on the checkbox.
Tested on Chrome also, and the bug do not seem to be there.

Minify pulltorefresh.js for better performance.

On android platform with cordova app, if user scroll from bottom to top, only touch start and only 1 touch move event is called, no touch end is fired.
This causes pull state is stuck at 'pulling' event and it doesnt work until user tap once on screen again to trigger touch end event

I'm evaluating a pull to refresh library and saw this library.

As a requirement we also have to support Windows Edge which is currently not working.

Tested with Edge 42.

It there any intention to support Edge in the future?

missing bower.json

Init code:

    window.PullToRefresh.init({
      mainElement: 'body',
      distThreshold: 100,
      distMax: 120,
      distReload: 1,
      iconArrow: '<i class="fa fa-arrow-down"></i>',
      iconRefreshing: '<i class="fa fa-spin fa-refresh"></i>',
      instructionsPullToRefresh: rmx.localize('System.Pull'),
      instructionsReleaseToRefresh: rmx.localize('System.Release'),
      instructionsRefreshing: ' ',
      refreshTimeout: 250,
      onRefresh: function () {
        $(document).trigger('vm.load');
      },
      onInit: function () {
        document.addEventListener('touchstart', onTouchListener);
        document.addEventListener('touchmove', onTouchListener);
      }
    });

Running Chrome 71.0.3578.98 on MacOs 10.14

Version 0.1.15 works fine.

First off, I want to say that I really like this project. As you've stated, your goal is to make it as easy as possible, and I think you've achieved that.

However, before I can implement this in production, I'd like a way to ensure that when we change pages in a SPA like ember or angular, we are able to teardown the listeners and bindings properly and free up memory. To me this would be a function that is returned that holds references to the listeners and created dom nodes and then that function can teardown and remove them.

I've created a work in progress that demonstrates what I think this would look like. Basically, init returns an object with a function destroy that should remove all bindings and whatnot.

I've submitted a PR for this functionality, which I consider a work in progress. If you're interested in adding this feature, I'd appreciate your feedback on the PR to make it as good as possible.

Thanks

When quickly slide the page, it may come across
Cannot read property 'classList' of null or
Cannot read property 'style' of null

I think the reason is the onReset function
handler.ptrElement = null;
handler.ptrElement is set to null ,but it is referenced in touchmove callback however.