jQuery实现滚动跳转指定位置，scrollIntoView与滚轮判断组合失效问题

核心故障原因 #

未阻止鼠标滚轮的默认滚动行为，你自定义的跳转逻辑和浏览器自带的默认滚动行为产生冲突，导致二者同时执行后结果不符合预期，同时你的代码还存在滚动事件兼容性差、单次滚动触发多次回调的问题。

可直接使用的修复后代码 #

<script type="text/javascript">
// 加滚动锁，防止单次滚动触发多次跳转
let isScrolling = false;
// 同时兼容webkit和火狐的滚动事件
$(window).on('mousewheel DOMMouseScroll', function(event) {
    // 先阻止浏览器默认滚动行为
    event.preventDefault();
    // 跳转中直接返回不重复处理
    if (isScrolling) return;
    isScrolling = true;
    
    // 兼容不同浏览器的滚动方向判断
    const delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
    if (delta >= 0) {
        console.log('Scroll up');
        window.scrollTo(0,0);
    } else {
        console.log('Scroll down');
        document.querySelector('#PROJECTS-2').scrollIntoView({
            // 可选：平滑滚动效果，不需要可以删掉该配置项
            behavior: 'smooth'
        });
    }

    // 1秒后解锁，可根据跳转时长调整数值
    setTimeout(() => {
        isScrolling = false;
    }, 1000);
})
</script>

改动说明 #

• 新增event.preventDefault()，完全禁用浏览器默认滚动，只执行自定义的跳转逻辑，解决冲突问题
• 兼容火狐浏览器的DOMMouseScroll事件，适配更多使用场景
• 新增滚动状态锁，避免单次滚轮操作触发多次事件回调导致反复跳转的问题
• 可选配置scrollIntoView的behavior: 'smooth'参数，实现平滑滚动效果，不需要可以直接删除配置项，恢复默认瞬间跳转

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