Verhindern Sie ein "Überschreiben" der Webseite

In Chrome für Mac kann man eine Seite "überschreiben" (mangels eines besseren Wortes), wie im folgenden Screenshot gezeigt, um zu sehen, was dahinter steckt, ähnlich wie beim iPad oder iPhone.

Ich habe festgestellt, dass einige Seiten deaktiviert sind, z. B. Google Mail und die Seite "Neuer Tab".

Wie kann ich "Overscrolling" deaktivieren? Gibt es andere Möglichkeiten, wie ich "Overscrolling" steuern kann?

Die akzeptierte Lösung funktionierte bei mir nicht. Der einzige Weg, wie ich es zum Laufen gebracht habe, während ich noch scrollen konnte, ist:

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

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

In Chrome 63+, Firefox 59+ und Opera 50+ können Sie dies in CSS tun:

body {
  overscroll-behavior-y: none;
}

Dadurch wird der im Screenshot der Frage gezeigte Gummibandeffekt unter iOS deaktiviert. Es deaktiviert jedoch auch Pull-to-Refresh, Glow-Effekte und Scroll-Verkettung.

Sie können jedoch beim Überblättern Ihren eigenen Effekt oder Ihre eigene Funktionalität implementieren. Wenn Sie beispielsweise die Seite verwischen und eine übersichtliche Animation hinzufügen möchten:

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

Browser-Unterstützung

Zum jetzigen Zeitpunkt unterstützen Chrome 63+, Firefox 59+ und Opera 50+ dies. Edge hat es öffentlich unterstützt, während Safari unbekannt ist. Verfolgen Sie hier den Fortschritt und die aktuelle Browserkompatibilität in der MDN-Dokumentation

Mehr Informationen

• Chrome 63 Release Video
• Chrome 63 Release Post - enthält Links und Details zu allem, was ich oben geschrieben habe.
• overscroll-behavior CSS-Spezifikation
• MDN-Dokumentation

Eine Möglichkeit, dies zu verhindern, ist die Verwendung des folgenden CSS:

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

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

Auf diese Weise hat der Körper nie einen Überlauf und "springt" nicht, wenn Sie oben und unten auf der Seite scrollen. Der Container wird seinen Inhalt perfekt scrollen. Dies funktioniert in Safari und in Chrome.

Bearbeiten

Warum das Extra- <div>Element als Wrapper nützlich sein könnte:
Die Lösung von Florian Feldhaus verwendet etwas weniger Code und funktioniert auch einwandfrei. Es kann jedoch eine kleine Eigenart haben, wenn es um Inhalte geht, die die Breite des Ansichtsfensters überschreiten. In diesem Fall wird die Bildlaufleiste am unteren Rand des Fensters zur Hälfte aus dem Ansichtsfenster verschoben und ist schwer zu erkennen / zu erreichen. Dies kann bei Bedarf vermieden werden body { margin: 0; }. In Situationen, in denen Sie dieses CSS nicht hinzufügen können, ist das Wrapper-Element hilfreich, da die Bildlaufleiste immer vollständig sichtbar ist.

Unten finden Sie einen Screenshot:

Mit diesem Code können Sie touchmovevordefinierte Aktionen entfernen :

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

Versuchen Sie es auf diese Weise

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

position: absolutefunktioniert bei mir. Ich habe auf Chrome 50.0.2661.75 (64-bit)und OSX getestet .

body {
  overflow: hidden;
}

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

Der Bounce-Effekt kann nur deaktiviert werden, wenn die Höhe der Webseite gleich window.innerHeightist. Sie können Ihre Unterelemente scrollen lassen.

html {
    overflow: hidden;
}