如何让浏览器禁用内置滚动优化？解决touchstart事件违规警告

一、针对元素内联ontouchstart的修复 #

你当前使用内联ontouchstart属性绑定事件，这种方式无法直接设置passive选项，需要改为JS显式调用addEventListener的方式处理：

1. 修改HTML，移除内联事件：

<button class="hidden pause-btn menu5" id="pause-button">
  <image id="pause-btn-img" src="./assets/images/menu/pause.png" />
</button>

2. 在JS中绑定事件并添加{passive: false}选项：

// 获取按钮元素
const pauseBtn = document.getElementById('pause-button');

// 绑定touchstart事件，明确标记非passive
pauseBtn.addEventListener('touchstart', function() {
  showMenu(document, 6);
  game = 'paused';
}, { passive: false });

// 保留原有showMenu函数
function showMenu(DOM, id) {
  var element = DOM.getElementsByClassName("menu" + id)[0];
  if (DOM.contains(element)) {
    element.style.display = "block";
  } else {
    console.error("Invalid DOM or invalid ID entered for showMenu(" + DOM + ", " + id + ")");
  }
}

设置passive: false后，浏览器会明确知晓你的事件处理函数可能调用preventDefault，不会触发违规警告。

二、网站无需滚动时的全局优化 #

如果你的网站完全不需要滚动，可以通过以下全局设置彻底避免这类警告：

1. 禁用页面滚动：

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

2. 全局绑定滚动相关事件并标记非passive（可选，确保所有场景都不会触发警告）：

// 对全局的滚动相关事件统一设置passive: false
['touchstart', 'touchmove', 'mousewheel'].forEach(eventName => {
  window.addEventListener(eventName, function() {}, { passive: false });
});

这样浏览器会放弃针对滚动的等待优化，同时页面本身无法滚动，完全适配你的场景。

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