flexdatalist下拉框滚动时不随输入框联动的问题求助

问题场景 #

使用flexdatalist时遇到一个恼人问题：打开下拉框后，将鼠标移到元素外滚动页面，输入框会随页面滚动，但下拉框却固定在原地不动，严重影响用户体验。

已尝试的解决方案（均未达到预期） #

• 通过flexdatalist事件阻止背景滚动：找不到下拉框打开时触发的全局事件，shown:flexdatalist.results会针对下拉框的每个选项触发，after:flexdatalist.data也无法解决问题。
• 使用JS或Jquery的点击事件限制仅flexdatalist下拉框内滚动：该方案无法全局复用，需根据场景调整限制对象——比如在弹窗中使用时要限制弹窗滚动，在页面主体使用时要限制body滚动。

临时可行方案 #

虽非最佳实践，但能有效解决问题，步骤如下：

1. 在show:flexdatalist.results事件中，给页面滚动容器（比如body或弹窗容器）设置overflow: hidden，阻止背景滚动：

$('.flexdatalist').on('show:flexdatalist.results', function() {
  // 根据实际场景选择容器，这里以body为例
  $('body').css('overflow', 'hidden');
});

2. 选中选项时，在change:flexdatalist事件中恢复容器的overflow属性：

$('.flexdatalist').on('change:flexdatalist', function() {
  $('body').css('overflow', 'auto');
});

3. 处理下拉框关闭但未选中选项的情况，通过监听document的点击事件恢复overflow，同时避免重复触发：

$(document).on('click', function(e) {
  // 判断点击区域是否在flexdatalist组件外，且下拉框已关闭
  if (!$('.flexdatalist').has(e.target).length && !$('.flexdatalist-results').is(':visible')) {
    $('body').css('overflow', 'auto');
  }
});

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