鼠标滚轮切换横竖滚动：轮播横向滚动结束后无法恢复垂直滚动求助

你的代码存在4个核心问题：

• 第一，横向滚动终点判断逻辑的触发时机错误：你把判断代码放在了window.scroll对应的init_position回调中，当你给html加上.stop-overflow类后，页面垂直滚动被禁止，window.scroll事件不会再触发，这段判断逻辑根本没有运行的机会。你需要单独监听.main容器自身的scroll事件来检测横向滚动位置。
• 第二，mousewheel事件重复绑定：每次init_position满足条件时都会调用init_mousewheel，会给document绑定多次鼠标滚轮事件，导致滚动行为异常，需要先解绑已有事件再绑定新事件，或者加状态标识避免重复绑定。
• 第三，滚动位置全等判断容易失效：浏览器计算的元素宽度、滚动距离可能存在小数，==全等判断很容易匹配失败，建议用>=代替，或者对两侧值先做取整处理。
• 第四，检测到滚动终点后没有做后续状态重置：你只是写了alert，没有移除.stop-overflow类，也没有解绑横向滚动的鼠标滚轮事件，自然无法恢复垂直滚动。

修正后的完整代码如下：

// 新增状态标识，避免重复绑定事件
let isHorizontalScrollActive = false;

jQuery(window).scroll(function() {
    init_position();
});

// 监听.main容器的横向滚动事件
jQuery('.main').on('scroll', function() {
    checkHorizontalScrollEnd();
});

var windowHeight = jQuery(window).height();
var sliderHeight = jQuery('.main__wrapper').outerHeight(true);
var distance = (windowHeight - sliderHeight) / 2;

function init_position() {
    var windowScroll = $(window).scrollTop();
    var sliderPosition = $('.main').offset().top - $(window).scrollTop();

    if (sliderPosition <= distance && !isHorizontalScrollActive) {
        console.log('进入横向滚动模式');
        $('html').addClass('stop-overflow');
        isHorizontalScrollActive = true;
        init_mousewheel();
        // 进入时先判断一次是不是已经到终点（避免异常情况）
        checkHorizontalScrollEnd();
    } else if (sliderPosition > distance && isHorizontalScrollActive) {
        // 向上滚动离开轮播区域时重置状态
        resetHorizontalScroll();
    }
}

// 单独抽离横向滚动终点检测逻辑
function checkHorizontalScrollEnd() {
    const main = $('.main');
    const wrapper = $('.main .main__wrapper');
    // 用>=代替==，避免小数问题
    if (main.scrollLeft() >= (wrapper.width() - main.width())) {
        console.log('横向滚动到底');
        resetHorizontalScroll();
        // 可选：滚动到底后自动让页面继续向下滚一点，避免停在轮播位置
        $(window).scrollTop($(window).scrollTop() + 10);
    }
}

function init_mousewheel() {
    // 先解绑已有事件，避免重复绑定
    $(document).off('mousewheel').on('mousewheel', function(e, delta) {
        $('#main')[0].scrollLeft -= (delta);
    }, { passive: false });
}

// 抽离横向滚动状态重置逻辑
function resetHorizontalScroll() {
    $('html').removeClass('stop-overflow');
    $(document).off('mousewheel');
    isHorizontalScrollActive = false;
}

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