Evitar el "desplazamiento excesivo" de la página web

En Chrome para Mac, uno puede "desplazarse demasiado" por una página (a falta de una palabra mejor), como se muestra en la captura de pantalla a continuación, para ver "qué hay detrás", similar al iPad o iPhone.

He notado que algunas páginas lo tienen deshabilitado, como Gmail y la página "Nueva pestaña".

¿Cómo puedo desactivar el "desplazamiento excesivo"? ¿Hay otras formas de controlar el "desplazamiento excesivo"?

La solución aceptada no me funcionó. La única forma en que lo hice funcionar sin dejar de poder desplazarme es:

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

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

En Chrome 63+, Firefox 59+ y Opera 50+ puedes hacer esto en CSS:

body {
  overscroll-behavior-y: none;
}

Esto desactiva el efecto de goma elástica en iOS que se muestra en la captura de pantalla de la pregunta. Sin embargo, también deshabilita la función de extracción para actualizar, los efectos de brillo y el encadenamiento de desplazamiento.

Sin embargo, puede optar por implementar su propio efecto o funcionalidad al realizar el desplazamiento excesivo. Si, por ejemplo, desea difuminar la página y agregar una animación ordenada:

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

Soporte del navegador

En el momento de escribir estas líneas, Chrome 63+, Firefox 59+ y Opera 50+ lo admiten. Edge lo apoyó públicamente, mientras que Safari es un desconocido. Siga el progreso aquí y la compatibilidad actual del navegador en la documentación de MDN

Más información

• Video de lanzamiento de Chrome 63
• Publicación de lanzamiento de Chrome 63 : contiene enlaces y detalles de todo lo que escribí anteriormente.
• overscroll-behavior Especificación CSS
• Documentación MDN

Una forma de evitar esto es utilizando el siguiente CSS:

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

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

De esta forma, el cuerpo nunca se desbordará y no "rebotará" al desplazarse por la parte superior e inferior de la página. El contenedor desplazará perfectamente su contenido dentro. Esto funciona en Safari y Chrome.

Editar

Por qué el elemento adicional <div>como envoltorio podría ser útil:
la solución de Florian Feldhaus usa un poco menos de código y también funciona bien. Sin embargo, puede tener un poco de peculiaridad cuando se trata de contenido que excede el ancho de la ventana gráfica. En este caso, la barra de desplazamiento en la parte inferior de la ventana se mueve fuera de la ventana gráfica hasta la mitad y es difícil de reconocer / alcanzar. Esto se puede evitar usar body { margin: 0; }si es adecuado. En una situación en la que no puede agregar este CSS, el elemento contenedor es útil ya que la barra de desplazamiento siempre está completamente visible.

Encuentre una captura de pantalla a continuación:

Puede utilizar este código para eliminar la touchmoveacción predefinida:

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

Prueba de esta manera

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

position: absolutefunciona para mi. He probado en Chrome 50.0.2661.75 (64-bit)y OSX.

body {
  overflow: hidden;
}

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

El efecto de rebote no se puede deshabilitar excepto que la altura de la página web sea igual a window.innerHeight, puede dejar que sus subelementos se desplacen.

html {
    overflow: hidden;
}