Impedir o “excesso de rolagem” da página

No Chrome para Mac, pode-se "ultrapassar" uma página (por falta de palavra melhor), como mostra a imagem abaixo, para ver "o que está por trás", semelhante ao iPad ou iPhone.

Notei que algumas páginas o têm desativado, como o Gmail e a página "nova guia".

Como posso desativar o "overscrolling"? Existem outras maneiras de controlar a "rolagem excessiva"?

A solução aceita não estava funcionando para mim. A única maneira de fazer funcionar e ainda conseguir rolar é:

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

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

No Chrome 63+, Firefox 59+ e Opera 50+, você pode fazer isso em CSS:

body {
  overscroll-behavior-y: none;
}

Isso desativa o efeito elástico no iOS mostrado na captura de tela da pergunta. No entanto, também desativa puxar para atualizar, efeitos de brilho e encadeamento de rolagem.

No entanto, você pode optar por implementar seu próprio efeito ou funcionalidade na rolagem excessiva. Se você, por exemplo, deseja desfocar a página e adicionar uma animação bacana:

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

Suporte de navegador

No momento em que este documento foi escrito, o Chrome 63+, Firefox 59+ e Opera 50+ suportam esse recurso. Edge apoiou publicamente enquanto o Safari é desconhecido. Acompanhe o progresso aqui e a compatibilidade do navegador atual na documentação do MDN

Mais Informações

• Vídeo de lançamento do Chrome 63
• Post de lançamento do Chrome 63 - contém links e detalhes de tudo o que escrevi acima.
• overscroll-behavior Especificação CSS
• Documentação MDN

Uma maneira de evitar isso é usando o seguinte CSS:

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

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

Dessa forma, o corpo nunca transborda e não "pula" ao rolar na parte superior e inferior da página. O contêiner irá rolar perfeitamente seu conteúdo dentro. Isso funciona no Safari e no Chrome.

Editar

Por que o <div>elemento- extra como um invólucro pode ser útil:
a solução de Florian Feldhaus usa um pouco menos de código e também funciona bem. No entanto, pode haver uma pequena peculiaridade quando se trata de conteúdo que excede a largura da janela de visualização. Neste caso, a barra de rolagem na parte inferior da janela é movida para fora da janela de visualização pela metade e é difícil de reconhecer / alcançar. Isso pode ser evitado body { margin: 0; }se for adequado. Na situação em que você não pode adicionar este CSS, o elemento wrapper é útil, pois a barra de rolagem está sempre totalmente visível.

Encontre uma captura de tela abaixo:

Você pode usar este código para remover a touchmoveação predefinida:

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

Tente assim

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

position: absolutefunciona para mim. Eu testei no Chrome 50.0.2661.75 (64-bit)e OSX.

body {
  overflow: hidden;
}

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

O efeito de salto não pode ser desabilitado, exceto a altura da página da web igual a window.innerHeight, você pode deixar seus subelementos rolar.

html {
    overflow: hidden;
}