React+CSS移动端嵌套滚动问题：无法触达footer及pagination组件

1. 调整滚动容器的高度限制 #

如果你的滚动section设置了height: 100vh这类占满视口的样式，会直接挤占页面其他内容的滚动空间。改成基于导航栏高度计算的最大高度，让容器不会覆盖footer和pagination：

.scroll-section {
  /* 替换100vh为计算值，80px替换为实际导航栏高度 */
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

2. 检查滚动事件的拦截逻辑 #

如果滚动容器绑定了自定义滚动事件，且调用了event.preventDefault()或event.stopPropagation()，会阻止页面整体滚动。移除这类拦截代码，或者在容器滚动到底部时允许事件传递：

// 示例：仅在容器未滚动到底时拦截事件
const scrollSection = document.querySelector('.scroll-section');
scrollSection.addEventListener('touchmove', (e) => {
  const isAtBottom = scrollSection.scrollTop + scrollSection.clientHeight >= scrollSection.scrollHeight;
  if (!isAtBottom) {
    e.preventDefault();
  }
}, { passive: false });

3. 修复全局滚动限制 #

检查全局样式，确保body和html没有被限制滚动：

html, body {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

4. 优化移动端触摸滚动 #

添加移动端滚动优化样式，避免滚动卡顿或事件异常：

.scroll-section {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

5. 动态适配响应式高度 #

如果导航栏高度在移动端有变化，用JS动态计算容器高度：

function setScrollSectionHeight() {
  const navbarHeight = document.querySelector('.navbar').offsetHeight;
  const scrollSection = document.querySelector('.scroll-section');
  scrollSection.style.maxHeight = `calc(100vh - ${navbarHeight}px)`;
}

// 初始化+监听窗口变化
setScrollSectionHeight();
window.addEventListener('resize', setScrollSectionHeight);

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