ipad safari: disabilitare lo scorrimento e l'effetto rimbalzo?

Sto lavorando su un'app basata su browser, attualmente sto sviluppando e disegnando per il browser Safari per iPad.

Sto cercando due cose sull'ipad: come posso disabilitare lo scorrimento verticale per le pagine che non lo richiedono? e come posso disabilitare l'effetto rimbalzo elastico?

Questa risposta non è più applicabile, a meno che tu non stia sviluppando per un dispositivo iOS molto vecchio ... Vedi altre soluzioni

Risposta del 2011: per un'app web / html in esecuzione all'interno di Safari iOS, vuoi qualcosa di simile

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

Per iOS 5 potresti prendere in considerazione quanto segue: document.ontouchmove e scorrimento su iOS 5

Aggiornamento settembre 2014: un approccio più completo può essere trovato qui: https://github.com/luster-io/prevent-overscroll . Per questo e per molti utili consigli sulle webapp, vedere http://www.luster.io/blog/9-29-14-mobile-web-checklist.html

Aggiornamento marzo 2016: l'ultimo collegamento non è più attivo - vedere https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist .html per la versione archiviata invece. Grazie @falsarella per averlo fatto notare.

Puoi anche modificare la posizione del corpo / html in fixed:

body,
html {
  position: fixed;
}

Per impedire lo scorrimento sui browser mobili moderni è necessario aggiungere il passivo: false. Mi stavo strappando i capelli per farlo funzionare finché non ho trovato questa soluzione. Ho trovato questo menzionato solo in un altro posto su Internet.

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

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

Puoi utilizzare questo frammento di codice jQuery per fare ciò:

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

Ciò bloccherà lo scorrimento verticale e anche qualsiasi effetto di rimbalzo che si verifica sulle tue pagine.

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

Sul contenitore è possibile impostare l'effetto di rimbalzo all'interno dell'elemento

Fonte: http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/

So che questo è leggermente fuori pista, ma ho utilizzato Swiffy per convertire Flash in un gioco HTML5 interattivo e ho riscontrato lo stesso problema di scorrimento ma non ho trovato soluzioni che funzionassero.

Il problema che ho avuto è stato che lo stadio Swiffy occupava l'intero schermo, quindi non appena è stato caricato, l'evento touchmove del documento non è mai stato attivato.

Se ho provato ad aggiungere lo stesso evento al contenitore Swiffy, è stato sostituito non appena lo stage è stato caricato.

Alla fine l'ho risolto (piuttosto in modo disordinato) applicando l'evento touchmove a ogni DIV all'interno dello stage. Poiché anche questi div erano in continua evoluzione, dovevo continuare a controllarli.

Questa era la mia soluzione, che sembra funzionare bene. Spero sia utile per chiunque altro cerchi di trovare la mia stessa soluzione.

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

Codice per Per rimuovere iPad Safari: disabilitare lo scorrimento e l'effetto rimbalzo

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

Se hai un tag canvas all'interno del documento, a volte influenzerà l'usabilità dell'oggetto all'interno di Canvas (esempio: movimento dell'oggetto); quindi aggiungi il codice sottostante per risolverlo.

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

Prova questa soluzione 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();
    }
});

Impedisce i gesti di scorrimento e di rimbalzo predefiniti di Safari senza scollegare gli ascoltatori di eventi touch.

nessuna delle soluzioni funziona per me. Ecco come lo faccio.

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

Testato su iPhone. Basta usare questo CSS sul contenitore dell'elemento di destinazione e cambierà il comportamento di scorrimento, che si ferma quando il dito lascia lo schermo.

-webkit-overflow-scrolling: auto

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

Per coloro che utilizzano MyScript la Web App e stanno lottando con lo scorrimento / trascinamento del corpo (su iPad e tablet) invece di scrivere effettivamente:

<body touch-action="none" unresolved>

Questo ha risolto il problema per me.

Puoi usare js per impedire lo scorrimento:

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);
  }
}

E non solo corri / fermati toggleScroll func quando apri / chiudi modale.

Come questo toggleScroll(true) / toggleScroll(false)

(Questo è solo per iOS, su Android non funziona)

Prova questa soluzione JS che alterna lo webkitOverflowScrollingstile. Il trucco qui è che questo stile è disattivato, Safari mobile passa allo scorrimento normale e previene il rimbalzo eccessivo - purtroppo, non è in grado di annullare il trascinamento in corso. Questa soluzione complessa tiene traccia anche in onscrollquanto il rimbalzo sopra le righe rende scrollTopnegativo che può essere tracciato. Questa soluzione è stata testata su iOS 12.1.1 e presenta un unico inconveniente: mentre si accelera lo scorrimento, si verifica ancora un singolo over-bounce poiché il ripristino dello stile potrebbe non annullarlo immediatamente.

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)
    }
  }
}

risposta migliorata @Ben Bos e commentata da @Tim

Questo CSS aiuterà a prevenire lo scorrimento e problemi di prestazioni con il ri-rendering CSS perché la posizione è cambiata / poco ritardo senza larghezza e altezza

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

Per quelli di voi che non vogliono sbarazzarsi del rimbalzo ma solo per sapere quando si ferma (ad esempio per iniziare un calcolo delle distanze dello schermo), è possibile fare quanto segue (il contenitore è l'elemento contenitore che trabocca):

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

Disabilita l'effetto di scorrimento del rimbalzo di Safari:

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

Simile al kiwi arrabbiato, l'ho fatto funzionare usando l'altezza piuttosto che la posizione:

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

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

Soluzione testata, funziona su iOS 12.x

Questo è il problema che stavo riscontrando:

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

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

  </article>
</body>

Mentre scorro la mia galleria, il corpo scorre sempre da solo (lo swipe umano non è realmente orizzontale), il che rende la mia galleria inutile.

Ecco cosa ho fatto mentre la mia galleria iniziava a scorrere

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

E quando la mia galleria finisce il suo scorrimento ...

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

Spero che questo aiuti ~