实现垂直滚动与水平滚动切换：解决水平滚动区域内垂直滚动干扰问题

我来帮你搞定这个问题！你当前的代码已经实现了水平滚动效果，但没有阻止滚轮事件的默认垂直滚动行为，导致操作水平滚动区域时页面还会同步上下滚动。我们只需要在合适的时机拦截默认行为，同时兼顾边界场景的用户体验即可。

问题根源 #

当你在水平滚动容器上触发滚轮事件时，浏览器会同时执行你自定义的水平滚动逻辑和默认的页面垂直滚动逻辑，两种滚动行为叠加就出现了你遇到的问题。

解决方案 #

修改JavaScript代码，添加event.preventDefault()阻止默认垂直滚动，但要先判断容器是否还能继续水平滚动——当滚动到最左或最右边缘时，要允许页面恢复垂直滚动，避免用户被困在区域内无法上下浏览。

修改后的代码 #

jQuery(function() { 
    jQuery(".horizontal-scroll-wrapper .elementor-container").mousewheel(function(event, delta) { 
        const container = this;
        // 计算滚轮滚动后的目标水平位置
        const targetScrollLeft = container.scrollLeft - (delta * 30);
        
        // 判断容器是否还有水平滚动空间
        const canScrollHorizontally = (targetScrollLeft > 0 && targetScrollLeft < (container.scrollWidth - container.clientWidth));
        
        if (canScrollHorizontally) {
            // 还有滚动空间：执行水平滚动并阻止默认垂直滚动
            container.scrollLeft = targetScrollLeft;
            event.preventDefault();
        } else {
            // 到达滚动边界：将容器定位到极限位置，允许页面垂直滚动
            container.scrollLeft = Math.max(0, Math.min(targetScrollLeft, container.scrollWidth - container.clientWidth));
        }
    }); 
});

代码细节说明 #

• targetScrollLeft：根据滚轮方向计算容器应该滚动到的水平位置
• canScrollHorizontally：检查目标位置是否在容器的有效滚动范围内（既不是最左端也不是最右端）
• 当容器还有水平滚动空间时，执行自定义水平滚动并阻止默认垂直滚动行为
• 当到达滚动边界时，将容器固定在极限位置，同时不拦截默认行为，让页面可以正常垂直滚动

其他说明 #

你的CSS和HTML代码不需要修改，已经正确设置了水平滚动容器的核心布局（flex-wrap: nowrap、overflow-x: auto）。

这样修改后，用户在水平滚动区域内滚轮时只会触发水平滚动；当滚动到区域两端后，滚轮操作会自动恢复为页面垂直滚动；离开区域后也会正常保持垂直滚动，完全符合你的需求。

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