禁用触摸板捏合缩放但保留双指滚动的JavaScript解决方案

嘿，我太懂你这个烦恼了！系统自带的捏合缩放抢了网格组件的风头就算了，连基本的双指滚动都给一并禁用，导致文本内容看不了简直是灾难性的。

你之前用的阻止wheel事件默认行为的思路方向是对的，但问题出在“一刀切”——把所有触摸板触发的滚轮事件都拦下来了，正常滚动自然也跟着躺枪了。

其实触摸板的捏合缩放有个很关键的特征：它触发wheel事件时，event.ctrlKey会是true（相当于用户按住Ctrl键滚动滚轮的效果），而普通的双指滚动这个属性是false。我们只要抓住这个区别，就能精准拦截捏合缩放，同时放行正常滚动：

window.addEventListener('wheel', event => {
    // 只在检测到Ctrl键按下（对应触摸板捏合缩放）时阻止默认行为
    if (event.ctrlKey) {
        event.preventDefault();
    }
}, {
    passive: false // 这个参数千万别忘，不然preventDefault会失效
});

你试试这个代码：当用户用双指滚动时，ctrlKey为false，事件不会被拦截，滚动完全正常；当尝试捏合缩放时，ctrlKey变成true，我们直接阻止默认行为，页面就不会乱缩放了。

另外提个小提醒：不同浏览器或者触摸板驱动可能有细微差异，你可以在目标设备上多测试下。如果之后还要处理移动端触摸屏幕的捏合缩放，那得额外监听触摸事件，但针对你现在的触摸板场景，这个方案应该能完美解决问题。

备注：内容来源于stack exchange，提问作者Joachim