在网页交互开发中，触控板双指缩放是浏览器默认支持的手势操作，但部分场景下这个默认行为会干扰页面的自定义交互逻辑，比如地图类应用、画布编辑类应用等。如果直接禁用所有触控相关事件，又会导致双指滚动功能失效，影响用户的正常浏览体验，因此需要针对性地处理双指缩放行为。
核心实现思路
实现禁用双指缩放保留双指滚动的核心逻辑分为两部分：一部分是通过CSS属性阻止浏览器默认的缩放行为，另一部分是通过JavaScript监听相关事件，过滤掉缩放相关的操作，同时保留滚动事件的默认行为。
1. 使用CSS touch-action属性
CSS的touch-action属性可以指定元素上允许的触摸行为，我们可以通过设置该属性来阻止默认的缩放行为。需要注意的是，这个属性不能设置为none，否则会同时禁用滚动等所有触摸行为。
针对需要禁用缩放的元素，可以设置如下样式：
/* 阻止双指缩放，但允许滚动和单指操作 */
.target-element {
touch-action: pan-x pan-y;
}
如果需要对整个页面生效，可以直接设置到body元素上：
body {
touch-action: pan-x pan-y;
}
2. 监听wheel事件处理缩放
触控板双指缩放在浏览器中通常会触发wheel事件，并且事件的ctrlKey属性会为true，同时deltaY属性会有对应的数值变化。我们可以通过监听wheel事件，判断是否是缩放操作，如果是则阻止默认行为，否则保留默认的滚动行为。
这里需要注意，现代浏览器中很多wheel事件监听器默认是被动的（passive），被动监听器无法调用preventDefault方法，因此我们需要显式设置监听器为非被动。
实现代码如下：
// 监听全局的wheel事件
document.addEventListener('wheel', function(e) {
// 判断是否是双指缩放：ctrlKey为true且是触控板触发（部分浏览器触控板缩放会带ctrlKey标识）
if (e.ctrlKey) {
// 阻止默认的缩放行为
e.preventDefault();
}
// 非缩放的wheel事件不处理，保留默认的滚动行为
}, { passive: false }); // 设置为非被动监听器，允许调用preventDefault
跨浏览器适配要点
不同浏览器对触控板事件的处理存在差异，需要针对性做适配：
- Chrome和Edge浏览器：双指缩放会触发
wheel事件且ctrlKey为true，上述代码可以直接生效。 - Firefox浏览器：双指缩放触发的
wheel事件中ctrlKey可能为false，但事件的deltaMode属性会有特殊表现，或者可以通过判断deltaY的绝对值是否异常大来识别缩放操作。 - Safari浏览器：部分版本的Safari对
touch-action属性支持不完善，需要额外监听gesturestart和gesturechange事件来阻止缩放。
针对Safari的适配代码示例如下：
// Safari适配：监听手势事件阻止缩放
document.addEventListener('gesturestart', function(e) {
e.preventDefault();
});
document.addEventListener('gesturechange', function(e) {
e.preventDefault();
});
完整示例代码
以下是一个完整的跨浏览器实现示例，整合了CSS和JavaScript的处理逻辑：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>禁用双指缩放保留滚动</title>
<style>
body {
touch-action: pan-x pan-y;
height: 200vh; /* 增加页面高度方便测试滚动 */
padding: 20px;
}
.content {
height: 1500px;
background: linear-gradient(#fff, #eee);
}
</style>
</head>
<body>
<div class="content">
<p>测试内容区域，尝试使用触控板双指缩放，会发现缩放被禁用，双指滚动可以正常使用。</p>
</div>
<script>
// 通用wheel事件处理
document.addEventListener('wheel', function(e) {
if (e.ctrlKey) {
e.preventDefault();
}
}, { passive: false });
// Safari手势事件处理
document.addEventListener('gesturestart', function(e) {
e.preventDefault();
});
document.addEventListener('gesturechange', function(e) {
e.preventDefault();
});
</script>
</body>
</html>
注意事项
- 不要将
touch-action设置为none，否则会导致所有触摸交互失效，包括点击、滚动等。 - 设置
wheel事件监听器时，必须显式指定{ passive: false }，否则在Chrome等浏览器中调用preventDefault会报错。 - 如果页面中有需要支持缩放的特定区域，可以给该区域单独设置
touch-action: auto，覆盖全局的设置。 - 部分旧版本浏览器不支持
touch-action属性，这种情况下可以只依赖JavaScript的事件监听逻辑，基本可以满足大部分场景的需求。
touch_actionwheel_eventpassive_event双指缩放双指滚动修改时间：2026-07-16 08:06:33