AngularJS
このAngularJSディレクティブを使用して正常に無効にしています:
//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);
}
};
});
プルトゥリフレッシュはトリガーされる可能性がないため、ユーザーが下にスクロールするとすぐに視聴を停止しても安全です。
同様に、の場合scrolltop > 0
、イベントはトリガーされません。私の実装では、の場合にのみ、touchstartでtouchmoveイベントをバインドしscrollTop <= 0
ます。ユーザーが下にスクロールするとすぐに、バインドを解除します(initialY >= e.touches[0].clientY
)。ユーザーが上にスクロールすると(previousY < e.touches[0].clientY
)、次のように呼び出しますpreventDefault()
。
これにより、スクロールイベントを不必要に監視する必要がなくなり、オーバースクロールがブロックされます。
jQuery
jQueryを使用している場合、これはテストされていない同等のものです。element
jQuery要素です。
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);
もちろん、純粋なJSでも同じことが実現できます。