如何让select标签下拉列表默认保持滚动条在底部

直接设置scrollTop对select标签无效，因为浏览器的原生下拉列表是独立于select元素的渲染组件，不属于select自身的滚动区域。可以用下面两种方法实现需求：

方法一：选中最后一个选项（简单可靠） #

通过选中select的最后一个选项，浏览器会自动将下拉列表滚动到该位置，无需手动操作滚动条：

const selectEl = document.getElementById("scroll");
// 点击select时触发
selectEl.addEventListener('click', function() {
  // 设置选中最后一个选项
  this.selectedIndex = this.options.length - 1;
});

如果不需要保留选中状态，只是滚动到底部，可以在设置后立即取消选中：

const selectEl = document.getElementById("scroll");
selectEl.addEventListener('click', function() {
  const lastIdx = this.options.length - 1;
  this.selectedIndex = lastIdx;
  // 延迟取消选中，确保滚动生效
  setTimeout(() => {
    this.selectedIndex = -1;
  }, 0);
});

方法二：利用焦点+按键模拟（无选中状态） #

通过聚焦select后模拟按下向下箭头触发滚动到底部，这种方法依赖浏览器原生行为，兼容性稍差：

const selectEl = document.getElementById("scroll");
selectEl.addEventListener('click', function() {
  this.focus();
  // 延迟发送按键事件，确保下拉列表已展开
  setTimeout(() => {
    const downKeyEvent = new KeyboardEvent('keydown', { key: 'ArrowDown' });
    // 连续发送多次按键事件，确保滚动到底部
    for(let i=0; i<this.options.length; i++) {
      this.dispatchEvent(downKeyEvent);
    }
  }, 100);
});

注意：第一种方法兼容性最好，推荐优先使用；第二种方法在部分浏览器可能存在行为不一致的情况。

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