Select2下拉框：单选项自动选中时页面滚动到底部问题

嘿，我懂你碰到的这个糟心问题——自动选中唯一匹配项时页面莫名滚到底部，确实挺影响体验的。我之前也遇到过类似情况，大概率是Select2在执行选中操作时，触发了浏览器默认的滚动行为（比如聚焦到select元素，或是下拉菜单关闭时的内部滚动逻辑）。

给你两个实用的解决方案，你可以根据自己的代码情况选：

方案一：记录并恢复滚动位置（最简单直接） #

这个思路很直白：在执行自动选中前先记下当前页面的滚动位置，选中完成后再把页面滚回去，完美抵消Select2触发的滚动。

修改你的代码如下：

$(function() {
  var matchCount = 0;
  var matched;
  $('select').select2({
    placeholder: 'Country Search',
    allowClear: true,
    minimumInputLength: 1,
    language: {
      inputTooShort: function () { return ''; }
    },
    query: function(params) {
      var self = this;
      // 保留你原有的查询逻辑，获取匹配结果
      var results = [];
      // （你的查询代码...）
      
      matchCount = results.length;
      if (matchCount === 1) {
        // 关键：记录当前滚动位置
        const currentScrollPos = $(window).scrollTop();
        
        matched = results[0].id;
        // 执行选中操作
        self.element.val(matched).trigger('change.select2');
        
        // 恢复之前的滚动位置
        $(window).scrollTop(currentScrollPos);
        
        // 可选：手动关闭下拉菜单（选中后通常会自动关闭，按需添加）
        self.close();
      }
      
      params.callback({ results: results });
    }
  });
});

方案二：用Select2原生方法选中并临时阻止滚动 #

如果你不想手动处理滚动位置，可以试试用Select2的原生select方法选中项，同时临时拦截一次滚动事件：

$(function() {
  $('select').select2({
    placeholder: 'Country Search',
    allowClear: true,
    minimumInputLength: 1,
    language: {
      inputTooShort: function () { return ''; }
    },
    query: function(params) {
      var self = this;
      var results = [];
      // （你的查询代码...）
      
      if (results.length === 1) {
        // 用Select2原生方法选中匹配项
        $('select').select2('select', results[0].id);
        
        // 临时阻止一次滚动事件，抵消Select2的默认滚动行为
        $(document).one('scroll', function(e) {
          e.preventDefault();
        });
      }
      
      params.callback({ results: results });
    }
  });
});

问题根源小科普 #

简单说，当Select2选中选项时，会自动将焦点转移到对应的select元素上，如果这个元素在页面底部区域，浏览器就会自动滚动页面让它进入视口，这就是你看到页面滚到底部的原因。上面的两种方法都是从不同角度抵消了这个默认行为。

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