Chosen库滚动控制需求：点击子选择器阻止滚动及点击位置逻辑

针对你提出的两个需求，我整理了一套基于jQuery和Chosen组件的落地方案，直接就能用：

一、点击子选择器时阻止页面滚动 #

当Chosen的下拉列表展开时，我们通过禁用body的滚动来实现页面固定，收起时恢复正常滚动：

// 监听Chosen下拉展开事件
$('select.your-chosen-selector').on('chosen:showing_dropdown', function() {
  // 给body添加overflow:hidden，禁用页面滚动
  $('body').css('overflow', 'hidden');
});

// 监听Chosen下拉收起事件
$('select.your-chosen-selector').on('chosen:hiding_dropdown', function() {
  // 恢复body的默认滚动行为
  $('body').css('overflow', '');
});

进阶优化（避免页面跳动）：如果你的页面有固定定位的头部/底部，上面的方案可能会导致页面偏移，可以调整为：

let originalScrollTop = 0;

$('select.your-chosen-selector').on('chosen:showing_dropdown', function() {
  originalScrollTop = $(window).scrollTop();
  $('body').css({
    'overflow': 'hidden',
    'position': 'fixed',
    'top': `-${originalScrollTop}px`,
    'width': '100%'
  });
});

$('select.your-chosen-selector').on('chosen:hiding_dropdown', function() {
  $('body').css({
    'overflow': '',
    'position': '',
    'top': ''
  });
  $(window).scrollTop(originalScrollTop);
});

二、Chosen选择器首次点击滚动条复位，后续保持位置 #

我们用一个状态标记来区分首次和非首次点击，首次展开时把滚动条拉到最左侧，之后就保留当前位置：

单组件版本 #

// 先初始化Chosen组件
$('select.your-chosen-selector').chosen({
  width: '100%' // 这里可以加你需要的Chosen配置项
});

// 标记是否为首次点击
let isFirstChosenClick = true;

$('select.your-chosen-selector').on('chosen:showing_dropdown', function() {
  // 先执行阻止页面滚动的逻辑
  $('body').css('overflow', 'hidden');

  if (isFirstChosenClick) {
    // 获取Chosen的结果滚动容器（不同版本DOM结构可能略有差异，需核对）
    const resultsContainer = $(this).next('.chosen-container').find('.chosen-results');
    // 复位滚动条到最左侧
    resultsContainer.scrollLeft(0);
    // 更新标记，后续点击不再复位
    isFirstChosenClick = false;
  }
});

$('select.your-chosen-selector').on('chosen:hiding_dropdown', function() {
  $('body').css('overflow', '');
});

多组件版本（避免互相干扰） #

如果页面有多个Chosen组件，建议用数据属性存储每个组件的首次点击状态，防止组件间互相影响：

// 初始化所有Chosen组件
$('.chosen-select').chosen({ width: '100%' });

$('.chosen-select').on('chosen:showing_dropdown', function() {
  $('body').css('overflow', 'hidden');

  const $select = $(this);
  // 从数据属性获取状态，默认是首次点击
  const isFirstClick = $select.data('is-first-click') !== false;

  if (isFirstClick) {
    const resultsContainer = $select.next('.chosen-container').find('.chosen-results');
    resultsContainer.scrollLeft(0);
    // 更新数据属性，标记为非首次
    $select.data('is-first-click', false);
  }
});

$('.chosen-select').on('chosen:hiding_dropdown', function() {
  $('body').css('overflow', '');
});

注意事项 #

• 请根据你使用的Chosen版本核对DOM结构，确保chosen-results容器的选择器正确；
• 如果你的Chosen下拉是纵向滚动场景，把代码里的scrollLeft(0)改成scrollTop(0)就行。

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