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

Я работаю над браузером, в настоящее время я разрабатываю и стилю для браузера Safari для ipad.

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

Ответ 1

Этот ответ больше не применим, если вы не разрабатываете для очень старого устройства 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 за то, что указал на это.

Ответ 2

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

body,
html {
  position: fixed;
}

Ответ 3

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

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

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

Ответ 4

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

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

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

Ответ 5

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

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

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

Ответ 6

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

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

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

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

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

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

Ответ 7

Попробуйте этот JS sollutuion:

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 без отсоединения ваших слушателей событий касания.

Ответ 8

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

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

Ответ 9

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

-webkit-overflow-scrolling: auto

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

Ответ 10

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

<body touch-action="none" unresolved>

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

Ответ 11

Вы можете использовать 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 при открытии/закрытии модального режима.

toggleScroll(true)/toggleScroll(false)

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

Ответ 12

Попробуйте это решение 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)
    }
  }
}

Ответ 13

Решение протестировано, работает на 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;}

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

Ответ 14

Код для удаления ipad Safari: отключить прокрутку и эффект отказов

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

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

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

Ответ 15

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

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

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

Ответ 16

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

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

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