如何仅用HTML和CSS阻止HTML页面指定区域滚动？

• 核心解决思路：让侧边栏容器固定在视口可视范围内，仅内部内容超出时滚动，而非跟随页面整体滚动到底。
• 具体CSS实现方案：
  1. 使用position: sticky替代固定高度设置，配合top属性控制侧边栏与视口顶部的间距（比如top: 12px，匹配Twitter的布局风格）
  2. 用max-height: calc(100vh - 24px)限制容器最大高度为视口高度减去上下预留间距，确保容器不会超出视口范围
  3. 添加overflow-y: auto，当内部内容高度超过容器最大高度时，仅在容器内部触发滚动
  4. 可选：隐藏滚动条以还原Twitter视觉效果，适配不同浏览器

/* 侧边栏容器样式 */
.sidebar {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  /* 隐藏滚动条 */
  scrollbar-width: none; /* Firefox */
}

.sidebar::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

• 为什么固定高度1308px无效？因为这个高度是内容的实际高度，当页面整体高度超过视口时，侧边栏会跟随页面滚动到底部。而sticky+视口高度计算的方式，是让容器基于视口尺寸做限制，内容超出时仅内部滚动，容器本身会始终保持在视口可视区域内。

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