克服网页中的“过度滚动”

在 Mac 版 Chrome 中，“过度滚动”是一种不良效果，它允许用户将页面拖到其正常查看区域之外，如所提供的图像所示。要解决此问题并改善用户体验，请考虑以下两种方法：

方法一：限制过度滚动

如果要完全禁用过度滚动，请使用以下 CSS 代码：

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

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

元素上的 Overflow: hide 属性可防止任何溢出内容变得可见，从而有效地将页面限制在其视口内。

方法 2：自定义过度滚动行为

要自定义和控制过度滚动行为，请使用触摸动作属性：

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

上面的代码阻止文本选择，同时允许常规触摸操作，包括在页面定义的高度内滚动。为了进行更精细的控制，您可以指定精确的触摸操作值，例如 pan-x 仅允许水平滚动。