Empêcher le «défilement excessif» de la page Web

Dans Chrome pour Mac, on peut «faire défiler» une page (faute d'un meilleur mot), comme le montre la capture d'écran ci-dessous, pour voir «ce qu'il y a derrière», similaire à 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»?

La solution acceptée ne fonctionnait pas pour moi. La seule façon dont je l'ai fait fonctionner tout en étant capable de faire défiler est:

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

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

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

body {
  overscroll-behavior-y: none;
}

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

Vous pouvez cependant choisir d'implémenter votre propre effet ou fonctionnalité lors du défilement excessif. Si vous souhaitez par exemple flouter la page 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>

Prise en charge du navigateur

Au moment d'écrire ces lignes, Chrome 63+, Firefox 59+ et Opera 50+ le prennent en charge. Edge l'a pris en charge publiquement alors que Safari est un inconnu. Suivez les progrès ici et la compatibilité actuelle du navigateur dans la documentation MDN

Plus d'information

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

Une façon d'éviter cela consiste à 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 n'a jamais de débordement et ne «rebondira» 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.

Éditer

Pourquoi cet <div>élément supplémentaire comme wrapper pourrait être utile:
la solution de Florian Feldhaus utilise un peu moins de code et fonctionne bien aussi. Cependant, cela peut avoir une petite bizarrerie, quand 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 hors de la fenêtre à mi-chemin et est difficile à reconnaître / atteindre. Cela peut être évité body { margin: 0; }si cela est approprié. Dans le 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:

Vous pouvez utiliser ce code pour supprimer une touchmoveaction prédéfinie:

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

Essayez de cette façon

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

position: absolutetravaille pour moi. J'ai testé sur Chrome 50.0.2661.75 (64-bit)et OSX.

body {
  overflow: hidden;
}

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

L'effet de rebond ne peut pas être désactivé sauf que la hauteur de la page Web est égale à window.innerHeight, vous pouvez laisser vos sous-éléments défiler.

html {
    overflow: hidden;
}