禁用select-picker点击时页面滚动到顶部的事件

你的下拉框HTML代码：

<select class="form-control select-picker" name="tags[]" id="tags" data-live-search="true" multiple="true">
</select>

这个问题的核心原因是：Bootstrap Select在打开下拉框或选择选项时，会自动聚焦到原生<select>元素，而浏览器的默认聚焦行为会自动滚动到该元素所在位置，导致页面跳转到顶部。下面是两种有效的解决办法：

方案一：阻止原生聚焦的滚动行为 #

通过拦截原生select的focus事件，取消默认聚焦行为，手动触发下拉框展开，同时在选择选项后强制恢复滚动位置：

// 处理下拉框点击时的聚焦滚动
$('.select-picker').on('focus', function(e) {
  e.preventDefault();
  $(this).blur(); // 取消原生元素的聚焦
  $(this).selectpicker('toggle'); // 手动触发下拉框展开
});

// 处理选择选项后的滚动回退
$('.select-picker').on('changed.bs.select', function() {
  const currentScroll = $(window).scrollTop();
  // 用setTimeout确保DOM更新后再恢复位置
  setTimeout(() => $(window).scrollTop(currentScroll), 10);
});

方案二：禁用组件的下拉聚焦选项 #

如果你的Bootstrap Select版本（v1.13+）支持dropdownFocus配置，可以直接通过属性或JS初始化禁用聚焦行为，从根源解决问题：

方式1：HTML属性配置 #

<select class="form-control select-picker" name="tags[]" id="tags" data-live-search="true" multiple="true" data-dropdown-focus="false">
</select>

方式2：JS初始化配置 #

$(function() {
  $('.select-picker').selectpicker({
    dropdownFocus: false
  });
});

为什么你之前的尝试无效？ #

• changed.bs.select事件里写$("body").scrollTop(0)是主动让页面滚到顶部，完全和需求相反
• e.offset().top只是获取元素位置，没有任何阻止滚动的逻辑
• e.off('scroll')、$(window).off('scroll')是移除滚动事件监听，但问题根源不是自定义滚动事件，而是浏览器默认的聚焦滚动
• e.preventDefault()没有绑定到正确的触发事件（比如focus或show.bs.select），所以无法生效

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