移动端Colorbox弹窗聚焦输入框时如何禁用自动滚动？

DevOps 小满

2026-8-13

移动端Colorbox弹窗滚动问题解决方案

问题本质

你碰到的两个移动端异常，都是Colorbox弹窗的滚动逻辑和移动端浏览器默认行为冲突导致：

小幅度滑动回弹：移动端浏览器的默认滚动回弹机制触发了弹窗容器的滚动重置
首次聚焦输入框弹窗滚顶：键盘弹出时浏览器自动滚动至聚焦元素，但弹窗的绝对定位导致滚动目标偏移

解决方案

1. 修复小幅度滑动回弹问题

给弹窗的滚动容器添加CSS限制，阻止滚动行为溢出到父页面：

#cboxLoadedContent {
    overscroll-behavior: contain; /* 限制滚动仅在容器内部，避免触发页面回弹 */
    -webkit-overflow-scrolling: touch; /* 保留移动端平滑滚动体验 */
}

如果上述CSS无效，检查Colorbox初始化配置是否开启内部滚动：

$.colorbox({
    scrolling: true, // 确保弹窗内容可独立滚动
    // 你的其他配置项
});

2. 修复首次聚焦输入框滚顶问题

核心是调整弹窗的定位方式，优先使用Colorbox自带的固定定位配置：

$.colorbox({
    fixed: true, // 将弹窗设置为固定定位，脱离页面滚动流
    // 你的其他配置项
});

若需要更灵活的定位控制，用CSS覆盖默认的绝对定位：

#colorbox {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%); /* 保持弹窗居中显示 */
}

如果仍存在异常，添加焦点事件监听手动控制滚动位置：

let isFirstFocus = true;
$('.quickform .inputfield').on('focus', function() {
    if (isFirstFocus) {
        isFirstFocus = false;
        // 滚动到当前输入框位置，避免弹窗跳至顶部
        const container = $('#cboxLoadedContent');
        const inputPosition = $(this).offset().top - container.offset().top;
        container.scrollTop(inputPosition - 20); // 减去20px留白提升体验
    }
});