如何阻止iOS版Chrome滚动超出页面底部？

解决方案 #

方案1：Flex布局重构（推荐） #

iOS Chrome对底部position: sticky存在兼容性bug，改用flex布局实现固定页眉+自适应内容区+固定页脚的结构，从根源解决滚动溢出问题，同时保留过度滚动行为：

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

body {
  display: flex;
  flex-direction: column;
}

header {
  height: 80px;
  position: sticky;
  top: 0; /* 保留滚动时页眉固定的效果 */
}

main {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior-y: contain; /* 允许过度滚动但限制在内容区内 */
}

footer {
  height: 80px;
  position: sticky;
  bottom: 0; /* 保留滚动时页脚固定的效果 */
}

此布局让主内容区独立滚动，而非整个页面滚动，彻底避免iOS Chrome误判页面高度导致的滚动溢出。

方案2：Grid布局适配原sticky结构 #

如果需要保留原sticky布局，用Grid布局精确控制页面高度，强制body占满视口：

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  position: sticky;
  top: 0;
  height: 80px;
}

footer {
  position: sticky;
  bottom: 0;
  height: 80px;
}

方案3：JS兜底限制滚动 #

若CSS方案无效，通过监听滚动事件强制限制滚动范围：

window.addEventListener('scroll', () => {
  const maxScroll = document.documentElement.scrollHeight - window.innerHeight;
  if (window.scrollY > maxScroll) {
    window.scrollTo(0, maxScroll);
  }
}, { passive: true });

设置passive: true保证滚动性能，避免页面卡顿。

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