小屏滚动时jQuery UI Datepicker定位异常问题

默认情况下，jQuery UI Datepicker基于整个文档做绝对定位，小尺寸屏幕下页面滚动时，输入框随页面移动，但日历控件会停留在初始位置，导致错位。以下是几种可行的解决方法：

方法1：基于父容器的相对定位 #

给输入框的父容器设置相对定位，让日历控件的定位上下文绑定到父容器而非整个文档：

1. 给输入框父容器添加CSS样式：

.date-input-wrapper {
  position: relative;
}

2. 初始化Datepicker时通过beforeShow回调手动校准位置：

$(".datepicker").datepicker({
  beforeShow: function(input, inst) {
    const $input = $(input);
    const parentPos = $input.parent().offset();
    const inputPos = $input.offset();
    // 计算日历相对于父容器的偏移量
    const left = inputPos.left - parentPos.left;
    const top = inputPos.top - parentPos.top + $input.outerHeight();
    
    // 延迟设置确保DOM已渲染日历容器
    setTimeout(() => {
      $(inst.dpDiv).css({
        position: "absolute",
        left: `${left}px`,
        top: `${top}px`
      });
    }, 0);
  }
});

方法2：监听滚动事件实时更新位置 #

绑定页面滚动事件，每次滚动时重新计算输入框位置，同步更新日历控件的定位：

let $activeDatepicker;

$(".datepicker").datepicker({
  onOpen: function() {
    $activeDatepicker = $(this).datepicker("widget");
    // 绑定滚动事件，添加命名空间避免冲突
    $(window).on("scroll.datepicker", updatePickerPos);
  },
  onClose: function() {
    // 关闭日历后解绑事件，防止内存泄漏
    $(window).off("scroll.datepicker");
    $activeDatepicker = null;
  }
});

function updatePickerPos() {
  if (!$activeDatepicker) return;
  const inst = $activeDatepicker.data("datepicker");
  const inputPos = inst.input.offset();
  $activeDatepicker.css({
    left: `${inputPos.left}px`,
    top: `${inputPos.top + inst.input.outerHeight()}px`
  });
}

方法3：重写Datepicker核心定位函数 #

直接覆盖jQuery UI Datepicker的默认定位逻辑，让所有日历实例都基于输入框当前位置计算定位：

$.datepicker._pos = function(inst, offset) {
  const $input = $(inst.input);
  const inputOffset = $input.offset();
  // 偏移量默认取输入框高度，即日历显示在输入框下方
  offset = offset || { top: $input.outerHeight(), left: 0 };
  return {
    top: inputOffset.top + offset.top,
    left: inputOffset.left + offset.left
  };
};

注意事项 #

• 若输入框位于动态容器（如标签页、折叠面板）内，需额外监听容器的滚动/显示事件，触发位置校准。
• 测试时覆盖主流小屏尺寸（320px、480px），确保滚动过程中无错位。

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