如何消除 Mac 版 Chrome 中不需要的'过度滚动”？

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

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

方法 1：限制过度滚动

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

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

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

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

上的 Overflow: auto 属性元素允许在页面指定高度内自然滚动，但限制过度滚动。

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

要自定义和控制过度滚动行为，请使用 touch-action 属性：

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

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

以上是如何消除 Mac 版 Chrome 中不需要的'过度滚动”？的详细内容。更多信息请关注PHP中文网其他相关文章！