Отключить обновление Chrome на iPhone - PullRequest
Новая
       12

Отключить обновление Chrome на iPhone

0 голосов
/ 08 июня 2018

Я внедряю приложение для рисования на своем сайте и пытаюсь предотвратить избыточную прокрутку, пока пользователь рисует на холсте.Несмотря на пробные решения, о которых сообщалось, я не могу отключить функцию Chrome Pull-to-refresh.

В соответствии с https://developers.google.com/web/updates/2017/11/overscroll-behavior, следующая строка css должна выполнить трюк..yet pull-to-refresh ираздражающий пользовательский опыт сохраняется .Есть идеи? 

<!DOCTYPE html>
<html>
<style type="text/css">
body {
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior-y: contain;
}
</style>

<body>
<h1>Simple Site</h1>
</body>

<script type="text/javascript">
</script>

</html>

Ответы [ 3 ]

0 голосов
/ 26 июля 2019

Для более новой версии chrome (я тестировал на v75.0.3770.103) на IOS, предотвращение дефолта () больше не отключает функцию «подтянуть-обновить».Вместо этого вы можете добавить {passive: false} в качестве дополнительной опции в прослушиватель событий.

Например, window.addEventListener("touchstart", eventListener, {passive:false});

0 голосов
/ 12 августа 2019

Единственное, что сработало для меня, это iNoBounce .

Пример фрагмента React: 

import 'inobounce'

...

<div style={{
  height: windowHeight,
  WebkitOverflowScrolling: 'touch',
  overflowY: 'auto' }}
>Content goes here</div>
0 голосов
/ 04 июля 2018

У меня была такая же проблема.Я обнаружил, что свойство CSS работает только на chrome-android.
Наконец, я успешно предотвращаю pull-to-refresh на chrome-ios с помощью следующего: 

<script>
  function preventPullToRefresh(element) {
    var prevent = false;

    document.querySelector(element).addEventListener('touchstart', function(e){
      if (e.touches.length !== 1) { return; }

      var scrollY = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
      prevent = (scrollY === 0);
    });

    document.querySelector(element).addEventListener('touchmove', function(e){
      if (prevent) {
        prevent = false;
        e.preventDefault();
      }
    });
  }

  preventPullToRefresh('#id') // pass #id or html tag into the method
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...