如何禁用Chrome原生的"max-scroll"滚动提示层？

我太懂这种烦躁了——全屏Canvas要做持续滑动交互，结果Chrome那个讨厌的滚动提示层跳出来打断体验，确实闹心！你已经试过的方法没起效，大概率是因为Chrome对触摸事件的默认处理机制和一些新的CSS属性没用到，试试下面这几个方案，应该能彻底解决：

1. 用CSS直接禁用overscroll行为 #

这是最直接的现代解决方案，Chrome支持overscroll-behavior属性，专门用来控制浏览器的滚动溢出行为，包括你说的这个提示层。把它加到你的全局样式里：

html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  overscroll-behavior: none; /* 核心：禁用所有overscroll相关的原生行为 */
}

这个属性会直接阻止浏览器在边界触发滚动提示、下拉刷新这些默认动作，比单纯的overflow:hidden更彻底。

2. 给Canvas禁用触摸默认行为 #

为了确保浏览器完全不把Canvas上的滑动识别成滚动，给Canvas元素加上touch-action: none：

canvas {
  touch-action: none; /* 告诉浏览器不要处理这个元素的任何触摸默认行为 */
}

这样你的Canvas就能完全接管所有触摸滑动事件，浏览器不会再插手。

3. 正确设置触摸事件监听（解决preventDefault无效的问题） #

你之前用touchstart或scroll事件的preventDefault()没起效，很大可能是因为Chrome现在默认把触摸事件设为passive: true——这个设置是为了滚动性能，但会导致preventDefault()被忽略。你需要显式设置passive: false来启用阻止默认行为：

document.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, { passive: false });

注意这里监听的是touchmove而不是touchstart，因为滚动提示层通常是在滑动过程中触发的，拦截touchmove能更精准地阻止它。

把这三个步骤结合起来，应该就能彻底干掉那个烦人的滚动提示层了！我之前做全屏Canvas交互的时候就是这么解决的，亲测有效~

内容的提问来源于stack exchange，提问作者aznoqmous