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

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

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

97
bounce ipad mobile-safari scroll

12 ответов

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

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

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

Обновление Сентябрь 2014: Более тщательный подход можно найти здесь:https://github.com/luster-io/prevent-overscroll. Для этого и много полезных советов webapp см 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 за указание на это.

150

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

body,
html {
  position: fixed;
}
82

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

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

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

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

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

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

6

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

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

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

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

var divInterval = setInterval(updateDivs,50);
function updateDivs(){
$("#swiffycontainer > div").bind(
    'touchmove',
     function(e) {
        e.preventDefault();
    }
);}
4
overflow: scroll;
-webkit-overflow-scrolling: touch;

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

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

3

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

2

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

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

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

-webkit-overflow-scrolling: auto

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

2

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

<body touch-action="none" unresolved>

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

1

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

такой toggleScroll(true) / toggleScroll(false)

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

0

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

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

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