Bootstrap 5 如何阻止Carousel在页面加载时跳转至页面顶部？

这个现象是Bootstrap 5 Carousel的默认交互逻辑和页面布局加载特性共同导致的：

• 组件初始化完成后，会默认将页面焦点锚定到自身控件上，触发浏览器原生的锚点滚动行为
• 轮播内嵌的图片未加载完成时，容器高度为0，等图片加载撑开高度时，原有滚动位置的参考基准发生变化，视觉上就会表现为页面瞬间跳回顶部
• 你之前课堂练习时Carousel本身就在页面顶部，哪怕触发跳转也察觉不到偏移，现在Carousel放在页面靠下的位置，这个问题就会被明显感知

• 手动初始化Carousel组件，关掉会触发滚动的默认参数，替换原来data-bs-ride="carousel"的自动初始化逻辑：
  移除根元素上的data-bs-ride="carousel"属性，在页面底部的脚本区加入自定义初始化代码：

  const carouselContainer = document.getElementById('carouselExampleIndicators');
  new bootstrap.Carousel(carouselContainer, {
    ride: true,
    scroll: false, // *重点*：禁用组件自带的滚动触发逻辑
    focus: false, // *重点*：禁止初始化时自动转移焦点引发页面滚动
    touch: true
  })
  

• 补充CSS规则，阻断组件触发的全局平滑滚动跳转：

  /* 覆盖轮播组件相关的滚动行为 */
  #carouselExampleIndicators,
  #carouselExampleIndicators * {
    scroll-behavior: auto !important;
    scroll-margin: 0 !important;
  }
  

• 提前固定轮播容器的尺寸，避免图片加载导致的布局偏移：
  给每个carousel-item加上固定宽高比规则，比如给容器设置aspect-ratio: 16/9，让图片在加载完成前就预留好对应的布局空间，不会因为高度变化打乱页面滚动位置。
• 排查补充：确认没有给Carousel的slide.bs.carousel事件绑定强制滚动到顶部的错误回调，你贴出的组件代码里没有这类逻辑，按前面的步骤调整就能解决问题。

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