Приведенный ниже код представляет собой решение только для javascript, полученное из нескольких источников, которые находятся внизу.
Если вы хотите изменить структуру своих страниц, вам может подойти только вариант CSS/HTML.
Кроме того, проект свойства CSS scroll-boundary-behavior
находится в процессе стандартизации и добавлен в Chrome, предоставляя эту возможность среди нескольких других. Поскольку реализация очень и очень новая, я предоставляю ссылки внизу своего ответа.
хотя структура iframe jsfiddle вообще не позволяет работать обновлению по запросу, я также протестировал тот же скрипт в плоском HTML-документе на Chrome Android 60.0.3112.116.
Полный jsfiddle
event.preventDefault()
может предотвратить поведение браузера по умолчанию, такое как обновление по запросу. Нам нужно обычное поведение браузера большую часть времени, но не тогда, когда это приведет к обновлению по запросу. Поскольку обновление по запросу происходит, когда касания перемещаются вниз по экрану, а мы прокручиваем документ вверх, мы будем вызывать preventDefault
только в этих условиях.
//We're going to make a closure that will handle events
//so as to prevent the pull-to-refresh behavior.
var pullToRefreshPreventer = (function() {
//To determine the direction in which a touch is moving,
//we hold on to a map from touch identifier to touches
//from the previous event.
var previousTouches = {};
return function(event) {
//First we get all touches in this event and set up
//the value which will replace `previousTouches`
//before this event handler exits.
var touches = Array.prototype.slice.call(event.touches);
nextTouches = {}
touches.forEach(function(touch){
nextTouches[touch.identifier] = touch;
});
//Pull-to-refresh behavior only happens if we are
//scrolled to the top of the document, so we can
//exit early if we are somewhere in the middle.
if(document.scrollingElement.scrollTop > 0) {
previousTouches = nextTouches;
return;
}
//Now we know that we are scrolled to the top of
//the document;
//look through the current set of touches and see
//if any of them have moved down the page.
for(var ix = 0; ix < touches.length; ix++) {
var touch = touches[ix],
id = touch.identifier;
//If this touch was captured in a previous event
//and it has moved downwards, we call preventDefault
//to prevent the pull-to-refresh behavior.
if(id in previousTouches && previousTouches[id].screenY < touch.screenY) {
event.preventDefault();
console.log("event.preventDefault() called")
break;
}
}
//lastly, we update previousTouches
previousTouches = nextTouches;
};
}());
//Since touch events which may call `preventDefault` can be
//much more expensive to handle, Chrome disallows such calls
//by default. We must add the options argument `{passive: false}`
//here to make it work.
document.body.addEventListener('touchmove', pullToRefreshPreventer, {passive: false});
document.body.addEventListener('touchend', pullToRefreshPreventer, {passive: false});
Использованная литература:
Ответ StackOverflow со ссылкой на страницу chromestatus.com
"Считать прослушиватели сенсорных событий на уровне документа пассивными", chromestatus
"Быстрая сенсорная прокрутка по умолчанию"
"События касания"
scroll-boundary-behavior
ссылки:
chromestatus
ошибка Chrome
выпуск github, предлагающий стандарт
черновик модуля CSS, дата последней публикации 07 сентября 2017 г.
person
ellisbben
schedule
21.09.2017