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

Question

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

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

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

2129 12

mobile-safari ipad scroll bounce

12 ответов:

Comments

Ничего не найдено.

Oskar Austegard · Accepted Answer · 2018-02-22 17:55:26

2011 ответ: для веб-приложения / html, работающего внутри iOS Safari, вы хотите что-то вроде
document.ontouchmove = function(event){
    event.preventDefault();
}
для iOS 5 Вы можете принять во внимание следующее: документ.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 за указание на это.

Ben Bos · Accepted Answer · 2015-04-14 16:51:31

вы также можете изменить положение тела / html на фиксированное:
body,
html {
  position: fixed;
}

Christopher Vickers · Accepted Answer · 2018-04-16 12:02:43

чтобы предотвратить прокрутку в современных мобильных браузерах, вам нужно добавить 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 });
}

Alessandro Incarnati · Accepted Answer · 2014-02-06 14:42:02

вы можете использовать этот фрагмент кода jQuery для этого:
$(document).bind(
      'touchmove',
          function(e) {
            e.preventDefault();
          }
);
это заблокирует вертикальную прокрутку, а также любой эффект отскока, происходящий на ваших страницах.

Tom · Accepted Answer · 2014-03-25 21:25:25

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

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

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

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

Это было мое решение, которое, кажется, работает хорошо. Я надеюсь, что это полезно для тех, кто пытается найти такое же решение, как и я.
var divInterval = setInterval(updateDivs,50);
function updateDivs(){
$("#swiffycontainer > div").bind(
    'touchmove',
     function(e) {
        e.preventDefault();
    }
);}

user956584 · Accepted Answer · 2015-03-20 11:50:28

overflow: scroll;
-webkit-overflow-scrolling: touch;
на контейнере вы можете установить эффект отскока внутри элемента

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

Andrii Verbytskyi · Accepted Answer · 2015-09-04 16:24:23

попробуйте этот 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.

angry kiwi · Accepted Answer · 2017-02-05 20:10:45

ни одно из решений не работает для меня. Вот как я это делаю.
  html,body {
      position: fixed;
      overflow: hidden;
    }
  .the_element_that_you_want_to_have_scrolling{
      -webkit-overflow-scrolling: touch;
  }

Dummy · Accepted Answer · 2017-10-13 17:23:37

протестировано в iphone. Просто используйте этот css на целевом контейнере элементов, и он изменит поведение прокрутки, которое останавливается, когда палец покидает экран.
-webkit-overflow-scrolling: auto
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

Miro · Accepted Answer · 2017-06-30 22:24:54

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

<body touch-action="none" unresolved>

что установил его для меня.

Vlad Novikov · Accepted Answer · 2018-02-03 14:33:34

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

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

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

austinh7 · Accepted Answer · 2017-06-12 16:02:07

подобно сердитому киви, я получил его для работы, используя высоту, а не положение:
html,body {
  height: 100%;
  overflow: hidden;
}

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