如何让scrollbar在container内滚动？解决sticky-top navbar偏移问题

针对你遇到的问题，有两种可行的解决方案，可根据需求选择：

方案一：强制body始终显示滚动条 #

通过CSS让body始终保留滚动条占位，避免导航栏因滚动条出现/消失产生偏移：

body {
  overflow-y: scroll;
}

优点：实现简单，无需调整页面结构；缺点：内容较短的页面会显示空的滚动条。

方案二：将滚动条限制在container容器内 #

完全把滚动区域限定在container中，同时调整导航栏的定位逻辑：

1. 首先设置html和body禁止滚动，把滚动权限交给container：

html, body {
  height: 100%;
  overflow: hidden;
}

.container {
  height: 100vh;
  overflow-y: auto;
}

2. 调整导航栏布局：
   将导航栏放在container外部，改用fixed定位替代sticky-top（效果一致且更稳定），同时给container添加顶部内边距避免内容被遮挡：

<nav class="navbar navbar-light bg-light">
  <!-- 导航栏内容 -->
</nav>
<div class="container">
  <!-- 页面主体内容 -->
</div>

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030; /* 保持和原sticky-top一致的层级 */
}

.container {
  padding-top: 56px; /* 数值对应导航栏的高度，可根据实际调整 */
}

优点：滚动条仅在内容区域显示，页面布局更整洁；缺点：需要调整导航栏的定位方式和内容容器的内边距。

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