Impedisce lo "scorrimento eccessivo" della pagina web

In Chrome per Mac, si può "scorrere" una pagina (in mancanza di una parola migliore), come mostrato nello screenshot qui sotto, per vedere "cosa c'è dietro", simile all'iPad o all'iPhone.

Ho notato che alcune pagine lo hanno disabilitato, come Gmail e la pagina "nuova scheda".

Come posso disabilitare l '"overscrolling"? Ci sono altri modi in cui posso controllare lo "overscrolling"?

La soluzione accettata non funzionava per me. L'unico modo per farlo funzionare pur essendo ancora in grado di scorrere è:

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

body {
    height: 100%;
    overflow: auto;
}

In Chrome 63+, Firefox 59+ e Opera 50+ puoi farlo in CSS:

body {
  overscroll-behavior-y: none;
}

Questo disabilita l'effetto elastico su iOS mostrato nello screenshot della domanda. Tuttavia, disabilita anche gli effetti pull-to-refresh, bagliore e scorrimento concatenato.

È tuttavia possibile scegliere di implementare il proprio effetto o funzionalità durante lo scorrimento eccessivo. Se ad esempio desideri sfocare la pagina e aggiungere un'animazione pulita:

<style>
  body.refreshing #inbox {
    filter: blur(1px);
    touch-action: none; /* prevent scrolling */
  }
  body.refreshing .refresher {
    transform: translate3d(0,150%,0) scale(1);
    z-index: 1;
  }
  .refresher {
    --refresh-width: 55px;
    pointer-events: none;
    width: var(--refresh-width);
    height: var(--refresh-width);
    border-radius: 50%; 
    position: absolute;
    transition: all 300ms cubic-bezier(0,0,0.2,1);
    will-change: transform, opacity;
    ...
  }
</style>

<div class="refresher">
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
</div>

<section id="inbox"><!-- msgs --></section>

<script>
  let _startY;
  const inbox = document.querySelector('#inbox');

  inbox.addEventListener('touchstart', e => {
    _startY = e.touches[0].pageY;
  }, {passive: true});

  inbox.addEventListener('touchmove', e => {
    const y = e.touches[0].pageY;
    // Activate custom pull-to-refresh effects when at the top of the container
    // and user is scrolling up.
    if (document.scrollingElement.scrollTop === 0 && y > _startY &&
        !document.body.classList.contains('refreshing')) {
      // refresh inbox.
    }
  }, {passive: true});
</script>

Supporto browser

Al momento della stesura di questo articolo, Chrome 63+, Firefox 59+ e Opera 50+ lo supportano. Edge lo ha supportato pubblicamente mentre Safari è uno sconosciuto. Tieni traccia dei progressi qui e della compatibilità del browser corrente nella documentazione MDN

Maggiori informazioni

• Video sulla versione di Chrome 63
• Post sulla versione di Chrome 63 : contiene collegamenti e dettagli a tutto ciò che ho scritto sopra.
• overscroll-behavior Specifiche CSS
• Documentazione MDN

Un modo per evitarlo è utilizzare il seguente CSS:

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

body > div {
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

In questo modo il corpo non avrà mai alcun trabocco e non "rimbalzerà" durante lo scorrimento in alto e in basso della pagina. Il contenitore scorrerà perfettamente il suo contenuto all'interno. Funziona in Safari e in Chrome.

modificare

Perché l' <div>elemento extra come wrapper potrebbe essere utile:
la soluzione di Florian Feldhaus usa un po 'meno codice e funziona anche bene. Tuttavia, può avere un piccolo capriccio, quando si tratta di contenuti che superano la larghezza del viewport. In questo caso la barra di scorrimento nella parte inferiore della finestra viene spostata fuori dalla finestra a metà ed è difficile da riconoscere / raggiungere. Questo può essere evitato usando body { margin: 0; }se adatto. In situazioni in cui non è possibile aggiungere questo CSS l'elemento wrapper è utile in quanto la barra di scorrimento è sempre completamente visibile.

Trova uno screenshot qui sotto:

È possibile utilizzare questo codice per rimuovere l' touchmoveazione predefinita:

document.body.addEventListener('touchmove', function(event) {
  console.log(event.source);
  //if (event.source == document.body)
    event.preventDefault();
}, false);

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

Prova in questo modo

body {
    height: 100vh;
    background-size: cover;
    overflow: hidden;
}

position: absoluteper me va bene. Ho provato su Chrome 50.0.2661.75 (64-bit)e OSX.

body {
  overflow: hidden;
}

// position is important
#element {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
}

L'effetto rimbalzo non può essere disabilitato tranne che l'altezza della pagina web è uguale a window.innerHeight, puoi far scorrere i tuoi sottoelementi.

html {
    overflow: hidden;
}