Bootstrap下拉菜单（dropdown-menu）滚动卡顿问题咨询

这个问题我太熟悉了！Chrome的默认滚动弹性回弹特性就是罪魁祸首——IE9没有这个浏览器自带的过渡效果，所以表现正常，但Chrome里当你滚到边界后继续触发滚动，浏览器会先执行弹性回弹的动画逻辑，才会回到顶部，这就导致了你看到的一秒卡顿。

给你几个靠谱的解决方案，按优先级推荐：

方法1：用CSS属性直接禁用边界弹性滚动 #

这是最简单高效的方案，给你的.dropdown-menu加上overscroll-behavior-y: contain属性，它能阻止滚动容器的边界溢出行为，去掉多余的回弹动画：

.dropdown-menu {
  display: inherit;
  max-height: 200px;
  width: 100%;
  overflow-x: hidden;
  overscroll-behavior-y: contain; /* 关键属性，解决卡顿 */
}

这个属性现在Chrome、Firefox等现代浏览器都支持，完全能覆盖你的场景。

方法2：用JavaScript手动拦截边界滚动事件 #

如果需要兼容非常老旧的浏览器版本（现在基本没必要了），可以监听滚动容器的滚轮事件，在到达边界时阻止默认行为：

const dropdownMenu = document.querySelector('.dropdown-menu');
dropdownMenu.addEventListener('wheel', function(e) {
  const scrollTop = this.scrollTop;
  const scrollHeight = this.scrollHeight;
  const clientHeight = this.clientHeight;
  
  // 到达顶部且向上滚，或到达底部且向下滚时，阻止默认行为
  if ((scrollTop === 0 && e.deltaY < 0) || (scrollTop + clientHeight >= scrollHeight && e.deltaY > 0)) {
    e.preventDefault();
  }
});

额外检查点 #

顺便确认一下外层容器（比如body或者.btn-group）有没有设置overflow相关属性，避免父容器的滚动行为干扰下拉菜单的独立滚动。

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