Подтвердить что ты не робот

Отключить IOS Safari Elastic Scrolling

Я пишу веб-приложение в HTML и JavaScript для использования на iPhone. То, что я хотел бы достичь, - это предотвращать прокрутку приложения (прокручивая страницы в сторону и отскакивая назад). Тем не менее, мне нужно, чтобы некоторые из более длинных элементов моего приложения могли прокручиваться (приложение имеет длинный холст).

Я пробовал много ответов на это в другом месте в Интернете, однако все эти решения либо использовали JQuery, вообще отключили прокрутку, либо использовали Phonegap, либо просто не работали на IOS 7. Как я могу это сделать?

Ответ 1

Существует способ добиться этого без jQuery:

document.body.addEventListener('touchmove', function(event) {
    event.preventDefault();
});

Но это не правильное решение. Лучше обернуть свой контент в какой-нибудь div и использовать на нем свойство css:

 -webkit-overflow-scrolling: touch;

Здесь приведен пример

Edit:

Это предотвратит перекос в webview, а не в приложении. Поэтому вам нужно отключить эту функцию в конфигурации приложения. Если вы используете phonegap:

<preference name="DisallowOverscroll" value="true" />

Подробнее здесь

Если вы не используете phonegap, вы можете использовать this.

Ответ 2

Вышеупомянутое решение было недостаточным в моем случае. Он запрещает прокрутку. Здесь можно построить решение, которое предотвращает прокрутку прокрутки в iOS, но тем не менее позволяет прокручивать детей. Я принял это решение и добавил проверку, которая пузырится на DOM, чтобы определить, какой прокручиваемый элемент "владеет" событием прокрутки, и если он является корневым элементом страницы, я бросаю его:

function overflowIsHidden(node) {
  var style = getComputedStyle(node);
  return style.overflow === 'hidden' || style.overflowX === 'hidden' || style.overflowY === 'hidden';
}

function findNearestScrollableParent(firstNode) {
  var node = firstNode;
  var scrollable = null;
  while(!scrollable && node) {
    if (node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight) {
      if (!overflowIsHidden(node)) {
        scrollable = node;
      }
    }
    node = node.parentNode;
  }
  return scrollable;
}

document.addEventListener('DOMContentLoaded', function() {

    document.body.addEventListener('touchmove', function(event) {
      var owner = findNearestScrollableParent(event.target);
      if (!owner || owner === document.documentElement || owner === document.body) {
        event.preventDefault();
      }
    });

}, false);

В этот момент тело больше не прокручивается или не прокручивается в iOS, а элементы с детьми. Затем вы можете добавить -webkit-overflow-scrolling: touch; этим детям, чтобы они были эластичными, но документ не будет. Это фактически захватит все события прокрутки, даже когда вы прокрутите список до дна, поэтому позиция прокрутки окна никогда не изменится ошибочно. В качестве альтернативы вы также можете рассмотреть:

['resize', 'orientationchange', 'scroll'].forEach(function(event) {
  window.addEventListener(event, function() {
    window.scrollTo(0, 0);
  });
});

который в дополнение к первому блоку кода, который я разделял, должен действительно бросать топор при прокрутке документа в ios вообще.

Ответ 3

Основываясь на ответе @umidbek, вот как это сработало для меня

     document.getElementById('content-sections').
         addEventListener('touchmove', function (event) {
               event.preventDefault();
               return false;
         });