Cegah "overscrolling" halaman web

Di Chrome untuk Mac, seseorang dapat "menggulung" halaman (karena tidak ada kata yang lebih baik), seperti yang ditunjukkan pada gambar di bawah, untuk melihat "apa yang ada di belakang", mirip dengan iPad atau iPhone.

Saya perhatikan bahwa beberapa halaman menonaktifkannya, seperti gmail dan halaman "tab baru".

Bagaimana cara menonaktifkan "overscrolling"? Apakah ada cara lain untuk mengontrol "overscrolling"?

Solusi yang diterima tidak berhasil untuk saya. Satu-satunya cara saya membuatnya berfungsi sambil tetap dapat menggulir adalah:

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

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

Di Chrome 63+, Firefox 59+, dan Opera 50+ Anda dapat melakukan ini di CSS:

body {
  overscroll-behavior-y: none;
}

Ini menonaktifkan efek karet gelang di iOS yang ditunjukkan di tangkapan layar pertanyaan. Namun itu juga menonaktifkan tarik-untuk-menyegarkan, efek cahaya dan rantai gulir.

Namun Anda dapat memilih untuk menerapkan efek atau fungsionalitas Anda sendiri setelah menggulir berlebihan. Jika Anda misalnya ingin mengaburkan halaman dan menambahkan animasi yang rapi:

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

Dukungan Browser

Pada tulisan ini Chrome 63+, Firefox 59+ dan Opera 50+ mendukungnya. Edge secara publik mendukungnya sementara Safari tidak dikenal. Lacak kemajuan di sini dan kompatibilitas browser saat ini di dokumentasi MDN

Informasi lebih lanjut

• Video rilis Chrome 63
• Pos rilis Chrome 63 - berisi tautan dan detail ke semua yang saya tulis di atas.
• overscroll-behavior Spesifikasi CSS
• Dokumentasi MDN

Salah satu cara untuk mencegahnya adalah dengan menggunakan CSS berikut:

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

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

Dengan cara ini badan tidak akan pernah meluap dan tidak akan "terpental" saat di-scroll di bagian atas dan bawah halaman. Kontainer akan menggulung kontennya dengan sempurna. Ini berfungsi di Safari dan di Chrome.

Edit

Mengapa elemen ekstra <div>sebagai pembungkus dapat berguna:
Solusi Florian Feldhaus menggunakan kode yang sedikit lebih sedikit dan berfungsi dengan baik juga. Namun, ini bisa memiliki sedikit kekhasan, jika menyangkut konten yang melebihi lebar viewport. Dalam hal ini scrollbar di bagian bawah jendela dipindahkan setengah dari viewport dan sulit untuk dikenali / dijangkau. Ini dapat dihindari penggunaan body { margin: 0; }jika cocok. Dalam situasi di mana Anda tidak dapat menambahkan CSS ini, elemen pembungkus berguna karena bilah gulir selalu terlihat sepenuhnya.

Temukan tangkapan layar di bawah ini:

Anda dapat menggunakan kode ini untuk menghapus touchmovetindakan yang telah ditentukan sebelumnya:

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

Coba cara ini

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

position: absolutebekerja untuk saya. Saya telah menguji Chrome 50.0.2661.75 (64-bit)dan OSX.

body {
  overflow: hidden;
}

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

Efek pantulan tidak dapat dinonaktifkan kecuali tinggi halaman web sama dengan window.innerHeight, Anda dapat membiarkan sub-elemen Anda menggulir.

html {
    overflow: hidden;
}