Ipad Safari: отключить прокрутку и эффект отказов? - PullRequest
Новая
       54

Ipad Safari: отключить прокрутку и эффект отказов?

112 голосов
/ 14 октября 2011

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

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

Ответы [ 15 ]

1 голос
/ 03 февраля 2018

Вы можете использовать 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 не работает)

1 голос
/ 30 июня 2017

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

<body touch-action="none" unresolved>

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

0 голосов
/ 15 апреля 2019

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

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

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

    document.getElementById("canvasId").addEventListener("touchmove", function (e) {
        e.stopPropagation();
    }, { passive: false });
0 голосов
/ 15 апреля 2019

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

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

0 голосов
/ 12 июня 2017

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

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

.the_element_that_you_want_to_have_scrolling{
  -webkit-overflow-scrolling: touch;
}
Страница:
...