我花了15分钟寻找一个类似的问题,但没有找到,所以就是这样:

我的应用程序是一个全屏画布,用户不断地在屏幕上移动手指, 因此,我想摆脱Chrome原生的"max-scroll"覆盖(见下图),当用户向上或向下移动他的手指时会发生这种情况

enter image description here

我的body的风格是这样的:

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

我在windowtouchstartscroll事件上try 了preventDefault()这样的东西,但似乎没有什么效果:

推荐答案

您可以在css中使用overscroll行为来防止overscroll效果.

它采用三种可能的值:

  • 自动-默认设置.起源于元素的滚动可以传播到祖先元素.
  • 包含-防止滚动链接.滚动不会传播到祖先,但会显示 node 内的局部效果.例如,Android上的超卷发光效果或iOS上的橡皮筋效果,当用户点击滚动边界时,它会通知用户.注意:在html元素上使用overscroll-behavior:CONTAINT可以阻止Overscroll导航操作.
  • NONE-与CONTAINE相同,但它还可以防止 node 本身内的超卷效果(例如,Android超卷发光或iOS橡皮筋).

要防止过度滚动光晕,请执行以下操作:

body {
    overscroll-behavior: none;
}

Javascript相关问答推荐

添加/删除时React图像上传重新渲染上传的图像

用相器进行向内碰撞检测

如何获取转换字节的所有8位?

Vega中的模运算符

按钮未放置在html dis位置

我不知道为什么setwritten包装promise 不能像我预期的那样工作

使用javascript将Plotly Expandable Sparkline转换为HighCharter Plot在bslib卡中

如何使覆盖div与可水平滚动的父div相关?

当点击注册页面上的注册按钮时,邮箱重复

如何从隐藏/显示中删除其中一个点击?

我在Django中的视图中遇到多值键错误

有条件重定向到移动子域

检索相加到点的子项

DOM不自动更新,尽管运行倒计时TS,JS

使用auth.js保护API路由的Next.JS,FETCH()不起作用

获取';无法解决导入和导入";slick-carousel/slick/slick-theme.css";';错误

在JS中动态创建对象,并将其追加到HTML表中

图表4-堆叠线和条形图之间的填充区域

重新呈现-react -筛选数据过多

如何使用[ModelJSON,ArrayBuffer]调用tf.loadGraphModelSync