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에서도 마찬가지입니다.