web-dev-qa-db-fra.com

Empêcher le "survol" de la page Web

Dans Chrome pour Mac, on peut "survoler" une page (faute d'un meilleur mot), comme illustré dans la capture d'écran ci-dessous, pour voir "qu'il reste 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 désactiver le "overscrolling"? Y a-t-il d'autres moyens par lesquels je peux contrôler le "survol"?

enter image description here

htmlcssmacosgoogle-chrome
86
Randomblue

La solution acceptée ne fonctionnait pas pour moi. La seule façon dont je peux le faire fonctionner tout en continuant à faire défiler est:

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

body {
    height: 100%;
    overflow: auto;
}
143
Florian Feldhaus

Une façon d'éviter ce problème consiste à utiliser les CSS suivants:

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.

Modifier

Pourquoi le supplément <div>- L'élément en tant que wrapper pourrait être utile:
solution de Florian Feldhaus utilise un peu moins de code et fonctionne très bien aussi. Cependant, il peut y avoir un petit problème en ce qui concerne le contenu qui dépasse la largeur de la fenêtre. Dans ce cas, la barre de défilement au bas de la fenêtre est déplacée à mi-chemin de la fenêtre et est difficile à reconnaître/atteindre. Ceci peut être évité en utilisant body { margin: 0; } si approprié. 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: enter image description here

38
insertusernamehere

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

body {
  overscroll-behavior-y: none;
}

Cela désactive l’effet élastique sur iOS présenté dans la capture d’écran de la question. Cependant, il désactive également les effets de tirage pour rafraîchir, les effets de rayonnement et le chaînage de défilement.

Vous pouvez cependant choisir d'implémenter votre propre effet ou fonctionnalité en cas de défilement excessif. Si vous voulez 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>

Support du navigateur

Au moment de la rédaction de ce texte Chrome 63+, Firefox 59+ et Opera 50+ le supporte. Edge l’a publiquement pris en charge alors que Safari était une inconnue. Suivre la progression - ici et compatibilité actuelle du navigateur à documentation MDN

Plus d'informations

34
Koslun

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

document.body.addEventListener('touchmove', function(event) {
  console.log(event.source);
  //if (event.source == document.body)
    event.preventDefault();
}, false);
1
Daniel Prol
html,body {
    width: 100%;
    height: 100%;
}
body {
    position: fixed;
    overflow: hidden;
}
1
Cormorano71

Essayez de cette façon

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

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

html {
    overflow: hidden;
}
0
Yibo

position: absolute Fonctionne 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;
}
0
Tony Jin