使用color类型<input>取色器后鼠标滚轮滚动失效问题及HTML/CSS解决方案咨询

我之前也碰到过这个烦人的问题！确实在Chrome和Edge浏览器里，点开<input type="color">的取色器（那个吸管图标）之后，页面的鼠标滚轮就会莫名其妙失效，非得切换标签页才能恢复，挺影响体验的。不过不用慌，纯CSS就能搞定这个bug，完全不需要JavaScript。

解决方案代码 #

/* 核心修复代码 */
input[type="color"] {
  pointer-events: none;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  pointer-events: auto;
}

input[type="color"]::-webkit-color-swatch {
  pointer-events: auto;
}

/* 你的原有样式 */
input { margin: 20px; }
div { height: 300vh; }

对应的完整HTML代码：

<style>
input { margin: 20px; }
div { height: 300vh; }

input[type="color"] {
  pointer-events: none;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  pointer-events: auto;
}

input[type="color"]::-webkit-color-swatch {
  pointer-events: auto;
}
</style>
<input type="color" />
<div></div>

原理说明 #

这个方案的核心是利用pointer-events属性规避浏览器的底层bug：

• 先把整个color input的pointer-events设为none，让它不直接接收鼠标事件，避免触发导致滚轮失效的异常流程；
• 再把取色器的核心交互区域（颜色预览块和它的包裹层）的pointer-events恢复为auto，保证我们仍然能正常点击打开取色器。

亲测这个方法在Chrome和Edge里都能完美解决问题，而且完全符合你要求的仅用HTML/CSS的限制。

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