Bootstrap 4如何设置下拉菜单始终滚动至顶部打开？

嘿，这个问题其实很好解决！Bootstrap的下拉菜单默认会保留之前的滚动位置，原因很简单——下拉列表元素只是被CSS隐藏（不是从DOM里移除），所以它的scrollTop值会一直保存着。咱们只需要借助Bootstrap提供的下拉事件，在菜单即将显示的时候把滚动条拉回顶部即可。

具体实现方法 #

你可以利用Bootstrap的show.bs.dropdown事件（这个事件会在下拉菜单开始显示的瞬间触发），然后在事件回调里把下拉菜单的滚动位置重置为0。

方法1：使用jQuery（推荐，因为Bootstrap依赖jQuery）

// 监听所有下拉菜单的显示事件
$('.dropdown').on('show.bs.dropdown', function() {
  // 找到当前下拉容器里的下拉菜单，设置scrollTop为0
  $(this).find('.dropdown-menu').scrollTop(0);
});

方法2：原生JavaScript（不依赖jQuery）

如果你的项目不想用jQuery，也可以用原生JS实现：

// 获取所有下拉容器
document.querySelectorAll('.dropdown').forEach(dropdown => {
  // 给每个下拉容器绑定显示事件
  dropdown.addEventListener('show.bs.dropdown', function() {
    const menu = this.querySelector('.dropdown-menu');
    if (menu) {
      // 重置滚动位置到顶部
      menu.scrollTop = 0;
    }
  });
});

针对单个下拉菜单的适配 #

如果你只想让某一个特定的下拉菜单生效，给它加个专属ID就行：

<div class="dropdown" id="mySpecialDropdown">
  <!-- 你的下拉按钮和菜单 -->
</div>

然后修改选择器：

// jQuery版本
$('#mySpecialDropdown').on('show.bs.dropdown', function() {
  $(this).find('.dropdown-menu').scrollTop(0);
});

// 原生JS版本
document.getElementById('mySpecialDropdown').addEventListener('show.bs.dropdown', function() {
  const menu = this.querySelector('.dropdown-menu');
  if (menu) menu.scrollTop = 0;
});

把这段代码加到你的项目里，再测试一下：打开下拉菜单滚动到中间，关闭后重新打开，就会发现菜单自动回到顶部啦！

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