Empêcher le "surdéveloppement" d'une page web

Question

Dans Chrome pour Mac, on peut "survoler" une page (faute d'un meilleur terme), comme le montre la capture d'écran ci-dessous, pour voir "ce qu'il y a derrière", comme sur l'iPad ou l'iPhone.

J'ai remarqué que certaines pages l'ont désactivé, comme gmail et la page "nouvel onglet".

Comment puis-je désactiver le "défilement excessif" ? Existe-t-il d'autres moyens de contrôler le "défilement excessif" ?

Answer 1

La solution acceptée ne fonctionnait pas pour moi. La seule façon de la faire fonctionner tout en permettant le défilement est la suivante :

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

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

Answer 2

Dans Chrome 63+, Firefox 59+ et Opera 50+, vous pouvez le faire en CSS :

body {
  overscroll-behavior-y: none;
}

Cela désactive l'effet d'élastique sur iOS montré dans la capture d'écran de la question. Cependant, elle désactive également l'option "pull-to-refresh", les effets de lueur et le chaînage de défilement.

Vous pouvez toutefois choisir d'implémenter votre propre effet ou fonctionnalité lors du sur-défilement. Si vous souhaitez par exemple rendre la page floue et ajouter une animation soignée :

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

Support des navigateurs

Au moment de la rédaction du présent document, Chrome 63+, Firefox 59+ et Opera 50+ le prennent en charge. Edge l'a publiquement supporté tandis que Safari est un inconnu. Suivre les progrès aquí et la compatibilité actuelle des navigateurs à Documentation MDN

Plus d'informations

• Vidéo de la sortie de Chrome 63
• Communiqué de presse sur la version 63 de Chrome - contient des liens et des détails sur tout ce que j'ai écrit ci-dessus.
• overscroll-behavior Spécification CSS
• Documentation MDN

Answer 3

Pour éviter cela, vous pouvez utiliser le CSS suivant :

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

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

De cette façon, le corps ne déborde jamais et ne "rebondit" pas lors du défilement en haut et en bas de la page. Le conteneur fera parfaitement défiler son contenu à l'intérieur. Cela fonctionne dans Safari et dans Chrome.

Editar

Pourquoi le supplément <div> -comme enveloppe pourrait être utile :
La solution de Florian Feldhaus utilise un peu moins de code et fonctionne bien aussi. Cependant, elle peut présenter une petite bizarrerie, lorsqu'il s'agit de contenu qui dépasse la largeur de la fenêtre. Dans ce cas, la barre de défilement en bas de la fenêtre est déplacée à mi-chemin de la fenêtre et est difficile à reconnaître/atteindre. Ce problème peut être évité en utilisant body { margin: 0; } si cela convient. Dans les cas où vous ne pouvez pas ajouter ce CSS, l'élément wrapper est utile car la barre de défilement est toujours entièrement visible.

Trouvez une capture d'écran ci-dessous :

Answer 4

Essayez de cette façon

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

Answer 5

Vous pouvez utiliser ce code pour supprimer touchmove action prédéfinie :

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