Я создал небольшое веб-приложение HTML5 для своей компании.
Это приложение отображает список элементов, и все работает отлично.
Приложение в основном используется на телефонах Android и Chrome в качестве браузера. Кроме того, сайт сохраняется на главном экране, поэтому Android управляет всем как приложением ( я полагаю, с помощью WebView ).
В Chrome Beta (а также, я думаю, и в Android System WebView) появилась функция «выпадающего меню для обновления» ( см. Эту ссылку, например ).
Это удобная функция, но мне было интересно, можно ли ее отключить с помощью некоторого метатега (или JavaScript), потому что обновление может быть легко инициировано пользователем во время навигации по списку, и все приложение перезагружается.
Также эта функция не нужна приложению.
Я знаю, что эта функция по-прежнему доступна только в бета-версии Chrome, но у меня есть ощущение, что она также попадает в стабильное приложение.
Спасибо!
Изменить: я удалил Chrome Beta и ссылка, прикрепленная к домашнему экрану, теперь открывается со стабильным Chrome. Так что закрепленные ссылки начинаются с Chrome, а не с веб-просмотра.
Редактировать: сегодня (2015-03-19) выпадающая версия обновилась до стабильного хрома.
Редактировать: из @Evyn answer Я перешел по этой ссылке и получил этот код javascript / jquery, который работает.
Как отметил @bcintegrity, я надеюсь, что в будущем появится решение для манифеста сайта (и / или метатег).
Более того, предложения по приведенному выше коду приветствуются.
источник
Ответы:
Действие по умолчанию для эффекта pull-to-refresh можно эффективно предотвратить, выполнив одно из следующих действий:
preventDefault
Использование некоторой части последовательности касания, включая любое из следующего (в порядке от наиболее разрушительного до наименее разрушительного):touch-action: none
» к элементам, нацеленным на прикосновение, где это необходимо, отключение действий по умолчанию (в том числе подтягивание-обновление) последовательности прикосновений.overflow-y: hidden
» к элементу body, используя div для прокручиваемого содержимого, если это необходимо.chrome://flags/#disable-pull-to-refresh-effect
).Узнать больше
источник
Простое решение для 2019+
Chrome 63 добавил свойство css, чтобы помочь именно с этим. Прочитайте это руководство от Google, чтобы получить представление о том, как с ним справиться.
Вот их TL: DR
Чтобы все заработало, все, что вам нужно добавить, это в вашем CSS:
На данный момент он также поддерживается только Chrome, Edge и Firefox, но я уверен, что Safari добавит его в ближайшее время, так как они, похоже, полностью совместимы с работниками сферы обслуживания и будущим PWA.
источник
На данный момент вы можете отключить эту функцию только через chrome: // flags / # disable-pull-to-refresh-effect - открыть прямо с вашего устройства.
Вы можете попытаться поймать
touchmove
события, но шансы очень малы, чтобы достичь приемлемого результата.источник
Я использую MooTools, и я создал класс, чтобы отключить обновление для целевого элемента, но суть его (родной JS):
Все, что мы здесь делаем, - это находим направление у сенсорного движения, и если мы движемся вниз по экрану, а целевой прокрутка равна 0, мы останавливаем событие. Таким образом, без обновления.
Это означает, что мы делаем все возможное, что может быть дорогостоящим, но это лучшее решение, которое я нашел до сих пор ...
источник
scrolltop > 0
событие не будет запущено. В моей реализации я связываюtouchmove
событиеtouchstart
, только еслиscrollTop <= 0
. Я отменяю привязку, как только пользователь прокручивает вниз (initialY >= e.touches[0].clientY
). Если пользователь прокручивает вверх (previousY < e.touches[0].clientY
), то я звонюpreventDefault
.После многих часов попыток это решение работает для меня
источник
html{touch-action:pan-down}
AngularJS
Я успешно отключил его с помощью этой директивы AngularJS:
Безопасно прекращать просмотр, как только пользователь прокручивает страницу вниз, так как попытка обновления не имеет шансов на срабатывание.
Аналогично, если
scrolltop > 0
событие не будет запущено. В моей реализации я связываю событие touchmove на touchstart, только еслиscrollTop <= 0
. Я отменяю привязку, как только пользователь прокручивает вниз (initialY >= e.touches[0].clientY
). Если пользователь прокручивает вверх (previousY < e.touches[0].clientY
), то я звонюpreventDefault()
.Это избавляет нас от ненужного просмотра событий прокрутки, но блокирует чрезмерную прокрутку.
JQuery
Если вы используете jQuery, это непроверенный эквивалент.
element
является элементом jQuery:Естественно, то же самое может быть достигнуто с чистым JS.
источник
e.originalEvent.touches[0].clientY
чтобы сделать эту работу. Все еще борется с логикой, когда нужно предотвратить перезагрузку. Прямо сейчас кажется, что случайным образом предотвращается прокрутка вверх ... Спасибо за подсказку в правильном направлении!Простой Javascript
Я реализовал с использованием стандартного JavaScript. Просто и легко реализовать. Просто вставьте и все работает нормально.
источник
body: {overflow-y:hidden}
трюк от Эвин выше .Лучшее решение на чистом CSS:
Посмотрите эту демонстрацию: https://jsbin.com/pokusideha/quiet
источник
Вы можете попробовать это
пример :
https://ebidel.github.io/demos/chatbox.html
полный документ https://developers.google.com/web/updates/2017/11/overscroll-behavior
источник
Я считаю настройку вашего тела CSS overflow-y: скрытым - самый простой способ. Если вы хотите иметь страницу приложения с прокруткой, вы можете просто использовать контейнер div с функциями прокрутки.
источник
Обратите внимание, что overflow-y не наследуется, поэтому вам нужно установить его для ВСЕХ элементов блока.
Вы можете сделать это с помощью jQuery просто:
источник
Через пару недель я обнаружил, что функция javascript, которую я использовал для отключения действия обновления Chrome, больше не будет работать. Я сделал это, чтобы решить это:
источник
Чистое решение JS.
источник
Что я сделал, так это добавил следующее в
touchstart
иtouchend
/touchcancel
events:Поскольку хром не прокручивается, если он не находится в положении прокрутки
0
это не позволит chrome выполнять обновление до нужного уровня.Если это все еще не работает, попробуйте также сделать это, когда страница загружается.
источник
Я решил проблему выпадающего меню с помощью этого:
источник