ipad safari: отключить прокрутку и эффект отскока?

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

Я ищу на ipad две вещи: как отключить вертикальную прокрутку для страниц, которые в ней не нуждаются? и как отключить эффект упругого отскока?

Этот ответ больше не применим, если вы не разрабатываете для очень старого устройства iOS ... См. Другие решения

Ответ 2011 года: для веб-приложения / html-приложения, работающего в iOS Safari, вам нужно что-то вроде

document.ontouchmove = function(event){
    event.preventDefault();
}

Для iOS 5 вы можете принять во внимание следующее: document.ontouchmove и прокрутка в iOS 5.

Обновление от сентября 2014 г. Более подробный подход можно найти здесь: https://github.com/luster-io/prevent-overscroll . Для этого и множества полезных советов по веб-приложениям см. Http://www.luster.io/blog/9-29-14-mobile-web-checklist.html.

Обновление март 2016 г .: эта последняя ссылка больше не активна - см. Https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist .html для заархивированной версии. Спасибо @falsarella за указание на это.

Вы также можете изменить положение body / html на фиксированное:

body,
html {
  position: fixed;
}

Чтобы предотвратить прокрутку в современных мобильных браузерах, вам нужно добавить passive: false. Я выдергивал волосы, заставляя это работать, пока не нашел это решение. Я нашел это только в одном месте в Интернете.

function preventDefault(e){
    e.preventDefault();
}

function disableScroll(){
    document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll(){
    document.body.removeEventListener('touchmove', preventDefault);
}

Для этого вы можете использовать этот фрагмент кода jQuery:

$(document).bind(
      'touchmove',
          function(e) {
            e.preventDefault();
          }
);

Это заблокирует вертикальную прокрутку, а также любой эффект возврата на ваши страницы.

overflow: scroll;
-webkit-overflow-scrolling: touch;

В контейнере вы можете установить эффект отскока внутри элемента

Источник: http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/

Я знаю, что это немного нестандартно, но я использовал Swiffy для преобразования Flash в интерактивную игру HTML5 и столкнулся с той же проблемой прокрутки, но не нашел решений, которые работали бы.

Проблема заключалась в том, что этап Swiffy занимал весь экран, поэтому, как только он загрузился, событие touchmove документа никогда не запускалось.

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

В конце концов я решил это (довольно беспорядочно), применив событие touchmove к каждому DIV на сцене. Поскольку эти div также постоянно менялись, мне нужно было постоянно их проверять.

Это было мое решение, которое, кажется, работает хорошо. Надеюсь, это поможет всем, кто пытается найти то же решение, что и я.

var divInterval = setInterval(updateDivs,50);
function updateDivs(){
$("#swiffycontainer > div").bind(
    'touchmove',
     function(e) {
        e.preventDefault();
    }
);}

Код для удаления ipad safari: отключите прокрутку и эффект отскока

   document.addEventListener("touchmove", function (e) {
        e.preventDefault();
    }, { passive: false });

Если у вас есть холст тег внутри документа, где- то это будет влиять на удобство объекта внутри Canvas (например: движение объекта); поэтому добавьте ниже код, чтобы исправить это.

    document.getElementById("canvasId").addEventListener("touchmove", function (e) {
        e.stopPropagation();
    }, { passive: false });

Попробуйте это решение JS :

var xStart, yStart = 0; 

document.addEventListener('touchstart', function(e) {
    xStart = e.touches[0].screenX;
    yStart = e.touches[0].screenY;
}); 

document.addEventListener('touchmove', function(e) {
    var xMovement = Math.abs(e.touches[0].screenX - xStart);
    var yMovement = Math.abs(e.touches[0].screenY - yStart);
    if((yMovement * 3) > xMovement) {
        e.preventDefault();
    }
});

Предотвращает прокрутку и жесты отскока в Safari по умолчанию без отключения прослушивателей событий касания.

ни одно из решений у меня не работает. Вот как я это делаю.

  html,body {
      position: fixed;
      overflow: hidden;
    }
  .the_element_that_you_want_to_have_scrolling{
      -webkit-overflow-scrolling: touch;
  }

Проверено на iphone. Просто используйте этот CSS в контейнере целевого элемента, и он изменит поведение прокрутки, которое останавливается, когда палец покидает экран.

-webkit-overflow-scrolling: auto

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

Для тех, кто использует MyScript в веб-приложении и борется с прокруткой / перетаскиванием тела (на iPad и планшетах) вместо того, чтобы писать:

<body touch-action="none" unresolved>

Это исправило это для меня.

Вы можете использовать js для предотвращения прокрутки:

let body = document.body;

let hideScroll = function(e) {
  e.preventDefault();
};

function toggleScroll (bool) {

  if (bool === true) {
    body.addEventListener("touchmove", hideScroll);
  } else {
    body.removeEventListener("touchmove", hideScroll);
  }
}

И чем просто запустить / остановить toggleScrollфункцию при открытии / закрытии модального окна.

Как это toggleScroll(true) / toggleScroll(false)

(Это только для iOS, на Android не работает)

Попробуйте это решение JS, которое переключает webkitOverflowScrollingстиль. Хитрость здесь в том, что этот стиль отключен, мобильный Safari переходит на обычную прокрутку и предотвращает чрезмерный отскок - увы, он не может отменить текущее перетаскивание. Это сложное решение также отслеживает, onscrollкак отскок сверху создает scrollTopнегатив, который можно отследить. Это решение было протестировано на iOS 12.1.1 и имеет единственный недостаток: при ускорении прокрутки все еще происходит одиночный избыточный отскок, поскольку сброс стиля может не отменить его немедленно.

function preventScrollVerticalBounceEffect(container) {
  setTouchScroll(true) //!: enable before the first scroll attempt

  container.addEventListener("touchstart", onTouchStart)
  container.addEventListener("touchmove", onTouch, { passive: false })
  container.addEventListener("touchend", onTouchEnd)
  container.addEventListener("scroll", onScroll)

  function isTouchScroll() {
    return !!container.style.webkitOverflowScrolling
  }

  let prevScrollTop = 0, prevTouchY, opid = 0

  function setTouchScroll(on) {
    container.style.webkitOverflowScrolling = on ? "touch" : null

    //Hint: auto-enabling after a small pause makes the start
    // smoothly accelerated as required. After the pause the
    // scroll position is settled, and there is no delta to
    // make over-bounce by dragging the finger. But still,
    // accelerated content makes short single over-bounce
    // as acceleration may not be off instantly.

    const xopid = ++opid
    !on && setTimeout(() => (xopid === opid) && setTouchScroll(true), 250)

    if(!on && container.scrollTop < 16)
      container.scrollTop = 0
    prevScrollTop = container.scrollTop
  }

  function isBounceOverTop() {
    const dY = container.scrollTop - prevScrollTop
    return dY < 0 && container.scrollTop < 16
  }

  function isBounceOverBottom(touchY) {
    const dY = touchY - prevTouchY

    //Hint: trying to bounce over the bottom, the finger moves
    // up the screen, thus Y becomes smaller. We prevent this.

    return dY < 0 && container.scrollHeight - 16 <=
      container.scrollTop + container.offsetHeight
  }

  function onTouchStart(e) {
    prevTouchY = e.touches[0].pageY
  }

  function onTouch(e) {
    const touchY = e.touches[0].pageY

    if(isBounceOverBottom(touchY)) {
      if(isTouchScroll())
        setTouchScroll(false)
      e.preventDefault()
    }

    prevTouchY = touchY
  }

  function onTouchEnd() {
    prevTouchY = undefined
  }

  function onScroll() {
    if(isTouchScroll() && isBounceOverTop()) {
      setTouchScroll(false)
    }
  }
}

улучшенный ответ @Ben Bos и прокомментированный @Tim

Этот CSS поможет предотвратить прокрутку и проблемы с производительностью при повторном рендеринге CSS, потому что положение изменилось / небольшое отставание без ширины и высоты

body,
html {
  position: fixed;
  width: 100%; 
  height: 100%
}

Для тех из вас, кто не хочет избавляться от подпрыгивания, а просто хочет знать, когда он останавливается (например, чтобы начать вычисление расстояний до экрана), вы можете сделать следующее (контейнер - это переполняющийся элемент контейнера):

    const isBouncing = this.container.scrollTop < 0 ||
    this.container.scrollTop + this.container.offsetHeight >
        this.container.scrollHeight

Отключить эффект прокрутки сафари отскоком:

html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
  position: fixed;
}  

Подобно сердитому киви, я заставил его работать с использованием высоты, а не положения:

html,body {
  height: 100%;
  overflow: hidden;
}

.the_element_that_you_want_to_have_scrolling{
  -webkit-overflow-scrolling: touch;
}

Решение протестировано, работает на iOS 12.x

Это проблема, с которой я столкнулся:

<body> <!-- the whole body can be scroll vertically -->
  <article>

    <my_gallery> <!-- some picture gallery, can be scroll horizontally -->
    </my_gallery>

  </article>
</body>

Пока я прокручиваю свою галерею, тело всегда прокручивается само (человеческий жест не совсем горизонтален), что делает мою галерею бесполезной.

Вот что я сделал, пока моя галерея начала прокручиваться

var html=jQuery('html');
html.css('overflow-y', 'hidden');
//above code works on mobile Chrome/Edge/Firefox
document.ontouchmove=function(e){e.preventDefault();} //Add this only for mobile Safari

И когда моя галерея перестанет прокручиваться ...

var html=jQuery('html');
html.css('overflow-y', 'scroll');
document.ontouchmove=function(e){return true;}

Надеюсь, это поможет ~