首页  >  文章  >  web前端  >  如何消除 Mac 版 Chrome 中不需要的“过度滚动”?

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

Patricia Arquette
Patricia Arquette原创
2024-10-30 10:32:03442浏览

How to Eliminate Unwanted

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

在 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn