在可滚动的网格列父级中显示静态 Flatpicker 的溢出

Question

我在正文中使用了网格显示，第一列有一些控制元素，第二列有全页视图。第一列可能包含很多元素，需要垂直滚动（overflow-x:auto）。

我在网格列的其他元素中有一个输入元素，我向其分配了 flatpicker。

https://codepen.io/dbauszus-glx/pen/wvpamZr

flatpickr("#date-input", {
  static: true,
  //appendTo: "scroll-parent"
});

我的问题是没有静态属性 flatpickr 控件显示但不滚动。

使用静态属性时，flatpickr 控件会与输入元素一起滚动，但显示会溢出父容器。

我希望控件在没有静态的情况下显示，但在滚动时链接到输入元素。

我尝试使用 appendTo 属性，但似乎没有任何效果。

Answer 1

搜索 flatpickr 问题我发现 issue 与 flatpickr 实例在 scrollparent 中的定位有关。

我将一个小的 util 方法放在一起，该方法采用 flatpickr 实例和一个 scrollParent 元素，并在 flatpickr 实例打开时将滚动事件侦听器附加到父元素。

滚动事件方法将重新定位绝对 flatpickr 容器。

onClose 事件将从 scrollParent 元素中删除滚动事件监听器。

function appendFlatpickrToScroll(fp, scrollParent) {
  fp.config.onOpen.push(() => {
    scrollParent.addEventListener("scroll", scrollEvent, { passive: true });
  });

  fp.config.onClose.push(() => {
    scrollParent.removeEventListener("scroll", scrollEvent);
  });

  function scrollEvent() {
    fp._positionCalendar();
  }
}

在可滚动的网格列父级中显示静态 Flatpicker 的溢出

Showing overflow of a static Flatpicker in a scrollable grid column parent

scroll

static

overflow

flatpickr