如何解决WordPress网站鼠标滚轮向下滚动时卡顿跳闪的问题

问题根因 #

Chrome 56及以上版本为提升滚动性能，默认将touchstart、touchmove、wheel类事件的监听器设为passive: true，此时如果监听器内调用preventDefault()方法会被浏览器忽略，同时抛出你遇到的报错，而你使用的Spectrum主题、旧版本滚动插件未适配该规则，就会导致滚动跳闪卡顿。

你此前尝试的操作误区：

• 新增touch-action: noneCSS规则无意义，该属性会禁用浏览器默认触摸行为，反而会加剧滚动性能问题，建议先删除该配置
• 单独添加window.addEventListener("touchstart", func, {passive: true} );无法解决问题，该操作仅新增了符合规则的监听器，没有替换原来已经绑定的不符合规则的旧监听器
• 手动编辑jquery.mousewheel.js未生效大概率是站点实际加载的文件不是你修改的版本，或修改后未清理缓存，且直接修改核心库文件后续版本更新会被覆盖，不推荐该操作

可落地修复方案 #

方案1：插件快速修复（无代码风险，优先选择）

• 在WordPress后台插件市场搜索安装「Passive Event Listener Fix」类修复插件，激活后插件会自动批量给所有触摸、滚动事件监听器添加passive: true配置
• 清理站点缓存、浏览器缓存后测试滚动即可

方案2：手动代码修复

• 进入WordPress后台→外观→主题文件编辑器，找到当前激活主题的functions.php文件
• 在文件末尾添加如下代码：

function passive_event_listener_fix() {
    ?>
    <script>
    const nativeAddEventListener = EventTarget.prototype.addEventListener;
    EventTarget.prototype.addEventListener = function(type, listener, options) {
        if (['touchstart', 'touchmove', 'wheel'].includes(type)) {
            options = typeof options === 'object' ? {...options, passive: true} : {passive: true};
        }
        return nativeAddEventListener.call(this, type, listener, options);
    };
    </script>
    <?php
}
add_action('wp_head', 'passive_event_listener_fix', 1);

• 保存文件后清理所有缓存（CDN缓存、站点缓存插件缓存、浏览器缓存）即可生效

如果以上操作完成后仍有卡顿，可以额外操作：

• 替换站点加载的jquery.mousewheel.js为3.1.13及以上的官方版本，新版本已经适配passive事件规则
• 逐个禁用近期更新的第三方插件，排查是否是插件绑定的滚动事件导致的冲突

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