android — Отключение функции выпадающего обновления для Android в Chrome" />

Отключение функции выпадающего обновления для Android в Chrome

Я создал небольшое веб-приложение HTML5 для своей компании.

Это приложение отображает список элементов, и все работает отлично.

Приложение в основном используется на телефонах Android и Chrome в качестве браузера. Кроме того, сайт сохраняется на главном экране, поэтому Android управляет всем этим как приложением ( с помощью WebView, я думаю ).

Chrome Beta (и, я думаю, также Android System WebView) представил функцию «выпадающего меню для обновления» ( см. Эту ссылку, например, ).

Это удобная функция, но мне было интересно, можно ли ее отключить с помощью какого-либо метатега (или javascript), потому что обновление может быть легко запущено пользователем во время навигации по списку, и все приложение перезагружается.

Также эта функция не нужна приложению.

Я знаю, что эта функция по-прежнему доступна только в бета-версии Chrome, но у меня есть ощущение, что она также попадает в стабильное приложение.

Спасибо!

Изменить: я удалил бета-версию Chrome, и теперь ссылка, прикрепленная к домашнему экрану, открывается в стабильном Chrome. Таким образом, закрепленные ссылки начинаются с Chrome, а не с веб-просмотра.

Редактировать: сегодня (2015-03-19) выпадающий список обновлений дошел до стабильного хрома.

Редактировать: из ответа @Evyn Я следую этой ссылке и получаю этот код javascript /jquery, который работает.

 var lastTouchY = 0;
var preventPullToRefresh = false;

$('body').on('touchstart', function (e) {
    if (e.originalEvent.touches.length != 1) { return; }
    lastTouchY = e.originalEvent.touches[0].clientY;
    preventPullToRefresh = window.pageYOffset == 0;
});

$('body').on('touchmove', function (e) {
    var touchY = e.originalEvent.touches[0].clientY;
    var touchYDelta = touchY - lastTouchY;
    lastTouchY = touchY;
    if (preventPullToRefresh) {
        // To suppress pull-to-refresh it is sufficient to preventDefault the first overscrolling touchmove.
        preventPullToRefresh = false;
        if (touchYDelta > 0) {
            e.preventDefault();
            return;
        }
    }
});

Как указала @bcintegrity, я надеюсь, что в будущем появится решение для манифеста сайта (и /или метатег).

Кроме того, приветствуются предложения по приведенному выше коду.

112 голосов | спросил Sebastiano 12 MarpmThu, 12 Mar 2015 14:10:53 +03002015-03-12T14:10:53+03:0002 2015, 14:10:53

13 ответов


0

Действие по умолчанию для эффекта pull-to-refresh можно эффективно предотвратить, выполнив одно из следующих действий:

  1. preventDefault ’в некоторой части последовательности касаний, включая любую из следующих (в порядке от наиболее разрушительной до наименее разрушительной):
    • а. Весь сенсорный поток (не идеальный).
    • б. Все самые лучшие сенсорные движения.
    • с. Первое верхнее касательное движение.
    • д. Первое касание с верхней прокруткой только тогда, когда 1) начальное касание произошло, когда смещение прокрутки страницы y было равно нулю, и 2) касание переместило бы верхнюю прокрутку.
  2. Применение «touch-action: none» к элементам, нацеленным на прикосновение, где это уместно, отключение действий по умолчанию (в том числе подтягивание к обновлению) последовательность касания.
  3. Применение «overflow-y: hidden» к элементу body, при необходимости используя div для прокручиваемого содержимого.
  4. Отключение эффекта локально с помощью chrome://flags/#disable-pull-to-refresh-effect).

Подробнее

ответил Evyn 28 MaramSat, 28 Mar 2015 07:26:17 +03002015-03-28T07:26:17+03:0007 2015, 07:26:17
0

Простое решение на 2018 год +

Chrome 63 (выпущен 5 декабря 2017 г.) добавил свойство css, чтобы помочь с этим. Прочтите это руководство от Google , чтобы получить хорошую идею о том, как вы можете справиться с этим.

Вот их TL: DR

  

Свойство CSS overscroll-поведения позволяет разработчикам переопределять   поведение прокрутки переполнения браузера по умолчанию при достижении   верх /низ контента. Варианты использования включают в себя отключение обновления   функция на мобильном телефоне, устраняющая эффекты свечения и резинки,   и предотвращение прокрутки содержимого страницы, когда оно находится под   модальный /оверлей.

Чтобы все заработало, все, что вам нужно добавить, это в вашем CSS:

body {
  overscroll-behavior: contain;
}

Это также только поддерживается Chrome, Edge и Firefox на данный момент, но я Я уверен, что Safari добавит его в ближайшее время, поскольку они, похоже, полностью согласны с работниками сферы обслуживания и будущим PWA.

ответил Matthew Mullin 8 FriEurope/Moscow2017-12-08T10:49:43+03:00Europe/Moscow12bEurope/MoscowFri, 08 Dec 2017 10:49:43 +0300 2017, 10:49:43
0

В настоящий момент вы можете отключить эту функцию только через chrome: //flags /# disable-pull-to-refresh-effect - открыть прямо с вашего устройства.

Вы можете попытаться перехватить события touchmove, но шансы достичь приемлемого результата очень малы.

ответил Kevin Busse 20 MarpmFri, 20 Mar 2015 19:31:42 +03002015-03-20T19:31:42+03:0007 2015, 19:31:42
0

Я использую MooTools и создал класс, чтобы отключить обновление для целевого элемента, но суть его (собственный JS):

var target = window; // this can be any scrollable element
var last_y = 0;
target.addEventListener('touchmove', function(e){
    var scrolly = target.pageYOffset || target.scrollTop || 0;
    var direction = e.changedTouches[0].pageY > last_y ? 1 : -1;
    if(direction>0 && scrolly===0){
        e.preventDefault();
    }
    last_y = e.changedTouches[0].pageY;
});

Все, что мы здесь делаем, это находим направление y касания, и если мы движемся вниз по экрану и целевая прокрутка равна 0, мы останавливаем событие. Таким образом, без обновления.

Это означает, что мы стреляем при каждом «движении», что может быть дорогостоящим, но это лучшее решение, которое я нашел на данный момент ...

ответил Eclectic 27 MarpmFri, 27 Mar 2015 17:16:27 +03002015-03-27T17:16:27+03:0005 2015, 17:16:27
0

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, событие не будет запущено. В моей реализации я связываю событие touchmove на touchstart, только если 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.

ответил Nicolas Bouliane 7 PM00000030000005431 2015, 15:21:54
0

После многих часов попыток это решение работает для меня

$("html").css({
    "touch-action": "pan-down"
});
ответил José Loguercio 31 MaramFri, 31 Mar 2017 11:15:00 +03002017-03-31T11:15:00+03:0011 2017, 11:15:00
0

Простой Javascript

Я реализовал с использованием стандартного JavaScript. Просто и легко реализовать. Просто вставьте, и все отлично работает.

<script type="text/javascript">         //<![CDATA[
     window.addEventListener('load', function() {
          var maybePreventPullToRefresh = false;
          var lastTouchY = 0;
          var touchstartHandler = function(e) {
            if (e.touches.length != 1) return;
            lastTouchY = e.touches[0].clientY;
            // Pull-to-refresh will only trigger if the scroll begins when the
            // document's Y offset is zero.
            maybePreventPullToRefresh =
                window.pageYOffset == 0;
          }

          var touchmoveHandler = function(e) {
            var touchY = e.touches[0].clientY;
            var touchYDelta = touchY - lastTouchY;
            lastTouchY = touchY;

            if (maybePreventPullToRefresh) {
              // To suppress pull-to-refresh it is sufficient to preventDefault the
              // first overscrolling touchmove.
              maybePreventPullToRefresh = false;
              if (touchYDelta > 0) {
                e.preventDefault();
                return;
              }
            }
          }

          document.addEventListener('touchstart', touchstartHandler, false);
          document.addEventListener('touchmove', touchmoveHandler, false);      });
            //]]>    </script>
ответил Sacky San 5 FebruaryEurope/MoscowbFri, 05 Feb 2016 02:19:43 +0300000000amFri, 05 Feb 2016 02:19:43 +030016 2016, 02:19:43
0

Лучшее решение на чистом CSS:

body {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: -1px;
    z-index: 1;
    margin: 0;
    padding: 0;
    overflow-y: hidden;
}
#pseudobody {
    width:100%;
    height: 100%;
    position: absolute;
    top:0;
    z-index: 2;
    margin: 0;
    padding:0;
    overflow-y: auto;
}

Посмотрите эту демонстрацию: https://jsbin.com/pokusideha/quiet

ответил Eugene Fox 25 FebruaryEurope/MoscowbSat, 25 Feb 2017 21:11:33 +0300000000pmSat, 25 Feb 2017 21:11:33 +030017 2017, 21:11:33
0

Я считаю, что настройка вашего body CSS overflow-y: hidden - самый простой способ. Если вы хотите иметь страницу приложения с прокруткой, вы можете просто использовать контейнер div с функциями прокрутки.

ответил Keegan Teetaert 1 stEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 01 Sep 2017 07:33:48 +0300 2017, 07:33:48
0

Через пару недель я обнаружил, что функция javascript, которую я использовал для отключения действия обновления Chrome, больше не будет работать. Я сделал это, чтобы решить это:

 $(window).scroll(function() {
   if ($(document).scrollTop() >= 1) {
      $("html").css({
         "touch-action": "auto"}
      );
   } else {
      $("html").css({
         "touch-action": "pan-down"
      });
   }
});
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
ответил Wobbo 1 MarpmWed, 01 Mar 2017 18:04:06 +03002017-03-01T18:04:06+03:0006 2017, 18:04:06
0

Обратите внимание, что overflow-y не наследуется, поэтому вам нужно установить его для ВСЕХ элементов блока.

Вы можете сделать это с помощью jQuery просто:

        $(document.body).css('overflow-y', 'hidden'); 
        $('*').filter(function(index) {
            return $(this).css('display') == 'block';
        }).css('overflow-y', 'hidden');
ответил kofifus 4 Maypm16 2016, 14:44:19
0

Я добавил следующее в touchstart и touchend /touchcancel события:

scrollTo(0, 1)

Так как Chrome не выполняет прокрутку, если он не находится в положении scrollY 0, это не позволит Chrome выполнять обновление по запросу.

Если это все еще не работает, попробуйте сделать это при загрузке страницы.

ответил xdevs23 20 +03002017-10-20T12:39:15+03:00312017bEurope/MoscowFri, 20 Oct 2017 12:39:15 +0300 2017, 12:39:15
0

Чистое решение JS.

// Prevent pull refresh chrome
    var lastTouchY = 0;
    var preventPullToRefresh = false;
    window.document.body.addEventListener("touchstart", function(e){
        if (e.touches.length != 1) { return; }
        lastTouchY = e.touches[0].clientY;
        preventPullToRefresh = window.pageYOffset == 0;
    }, false);

    window.document.body.addEventListener("touchmove", function(e){

        var touchY = e.touches[0].clientY;
        var touchYDelta = touchY - lastTouchY;
        lastTouchY = touchY;
        if (preventPullToRefresh) {
            // To suppress pull-to-refresh it is sufficient to preventDefault the first overscrolling touchmove.
            preventPullToRefresh = false;
            if (touchYDelta > 0) {
                e.preventDefault();
                return;
            }
        }

    }, false);
ответил user1503606 25 +03002017-10-25T15:21:26+03:00312017bEurope/MoscowWed, 25 Oct 2017 15:21:26 +0300 2017, 15:21:26

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132