#javascript #mobile #progressive-web-apps #pull-to-refresh #intersection-observer
#язык JavaScript #Мобильный #прогрессивные-веб-приложения #подтягивание для обновления #пересечение-наблюдатель
Вопрос:
Я пытаюсь реализовать функцию «подтягивание к обновлению» в своем мобильном PWA.
Так как я хочу избежать использования touchStart и touchEnd определить, спустил ли пользователь страницу, поэтому я подумал об использовании intersectionObserver .
Мой подход таков: «если оболочка страницы просматривается на 50%, запустите функцию обновления».
( pullToRefresh = () =gt; { const wrapper = document.querySelector('.wrapper'); const options = { root: null, rootMargin: "0px 0px 0px 0px", threshold: 0, }; wrapperObserver = new IntersectionObserver (function (entries, observer) { entries.forEach(function(entry) { if (entry.intersectionRatio gt; 0.5) { console.log('wrapper in view') } else if (entry.intersectionRatio lt;= 0.5) { console.log("wrapper out of view") location.reload(true) } }); }, options); wrapperObserver(wrapper); })(); Это const wrapper видно с самого начала и всегда только 100vh высоко.
Однако я не могу заставить его выстрелить. (Я использую симулятор iOS, чтобы протестировать его.) Спасибо за любые советы!
Комментарии:
1. wrapperObserver.наблюдать(обертка); ?