Superando a "rolagem excessiva" em páginas da Web

No Chrome para Mac, a "rolagem excessiva" é um efeito indesejável que permite aos usuários arrastar uma página além de sua área de visualização normal, como pode ser visto na imagem fornecida. Para resolver esse problema e melhorar a experiência do usuário, considere os dois métodos a seguir:

Método 1: Restringindo a rolagem excessiva

Se você deseja desativar totalmente a rolagem excessiva, use o seguinte código CSS:

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

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

A propriedade overflow: hidden no elemento evita que qualquer conteúdo overflow se torne visível, limitando efetivamente a página dentro de sua janela de visualização. A propriedade overflow: auto no elemento

Método 2: Personalizando o comportamento de rolagem excessiva

Para personalizar e controlar o comportamento de rolagem excessiva, utilize a propriedade touch-action:

body {
    -webkit-touch-callout: none;
    -webkit-touch-action: manipulation;
}

O código acima impede a seleção de texto enquanto permite a manipulação geral de toque, incluindo a rolagem dentro da altura definida da página. Para um controle mais granular, você pode especificar valores precisos de ação de toque, como pan-x para permitir apenas rolagem horizontal.