Superar el "desplazamiento excesivo" en páginas web

En Chrome para Mac, el "desplazamiento excesivo" es un efecto no deseado que permite a los usuarios arrastrar una página más allá de su área de visualización normal. como se ve en la imagen proporcionada. Para abordar este problema y mejorar la experiencia del usuario, considere los siguientes dos métodos:

Método 1: Restringir el desplazamiento excesivo

Si desea desactivar completamente el desplazamiento excesivo, emplee el siguiente código CSS:

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

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

La propiedad overflow: oculta en el elemento evita que cualquier contenido desbordado se vuelva visible, limitando efectivamente la página dentro de su ventana gráfica. La propiedad overflow: auto en el elemento

Método 2: Personalizar el comportamiento de desplazamiento excesivo

Para personalizar y controlar el comportamiento de desplazamiento excesivo, utilice la propiedad de acción táctil:

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

El código anterior evita la selección de texto y al mismo tiempo permite la manipulación táctil general, incluido el desplazamiento dentro de la altura definida de la página. Para un control más granular, puedes especificar valores de acción táctil precisos, como pan-x para permitir solo el desplazamiento horizontal.