Angularjs
I successfully disabled it using this AngularJS directive:
//Prevents "pull to reload" behaviour in Chrome. Assign to child scrollable elements. angular.module('hereApp.directive').directive('noPullToReload', function() { 'use strict'; return { link: function(scope, element) { var initialY = null, previousY = null, bindScrollEvent = function(e){ previousY = initialY = e.touches[0].clientY; // Pull to reload won't be activated if the element is not initially at scrollTop === 0 if(element[0].scrollTop <= 0){ element.on("touchmove", blockScroll); } }, blockScroll = function(e){ if(previousY && previousY < e.touches[0].clientY){ //Scrolling up e.preventDefault(); } else if(initialY >= e.touches[0].clientY){ //Scrolling down //As soon as you scroll down, there is no risk of pulling to reload element.off("touchmove", blockScroll); } previousY = e.touches[0].clientY; }, unbindScrollEvent = function(e){ element.off("touchmove", blockScroll); }; element.on("touchstart", bindScrollEvent); element.on("touchend", unbindScrollEvent); } }; });
It is safe to stop viewing as soon as the user scrolls down, since the pull to update has no chance of being called.
Similarly, if scrolltop > 0 , the event will not be fired. In my implementation, I bind the touchmove event to touchstart only if scrollTop <= 0 . I disconnect it as soon as the user scrolls down ( initialY >= e.touches[0].clientY ). If the user scrolls ( previousY < e.touches[0].clientY ), I call preventDefault() .
This saves us from viewing scroll events unnecessarily, but blocks cross-checking.
JQuery
If you use jQuery, this is an unverified equivalent. element is a jQuery element:
var initialY = null, previousY = null, bindScrollEvent = function(e){ previousY = initialY = e.touches[0].clientY; // Pull to reload won't be activated if the element is not initially at scrollTop === 0 if(element[0].scrollTop <= 0){ element.on("touchmove", blockScroll); } }, blockScroll = function(e){ if(previousY && previousY < e.touches[0].clientY){ //Scrolling up e.preventDefault(); } else if(initialY >= e.touches[0].clientY){ //Scrolling down //As soon as you scroll down, there is no risk of pulling to reload element.off("touchmove"); } previousY = e.touches[0].clientY; }, unbindScrollEvent = function(e){ element.off("touchmove"); }; element.on("touchstart", bindScrollEvent); element.on("touchend", unbindScrollEvent);
Naturally, the same can be achieved with pure JS.