使用mdbootstrap/react时全屏背景图导致页面滚动禁用问题求助

问题出在你的.background-people样式里的height: 100vh设置。这个属性会让背景容器固定占据当前视口的高度，当容器内的内容高度超过视口高度时，容器不会自动扩展高度，内容会被截断在视口范围内，自然无法触发页面滚动。

解决方案：修改CSS高度属性 #

把height: 100vh替换成min-height: 100vh，这样容器会保证至少占满视口高度，同时如果内容超过视口高度，容器会自动拉伸以容纳所有内容，页面滚动功能就能正常工作了。

修改后的CSS代码：

.background-people {
  background-image: url('../public/img/background-people.jpeg');
  background-attachment: fixed;
  min-height: 100vh; /* 替换原有的height:100vh */
}

额外检查点 #

如果修改后仍有滚动问题，检查.mask元素是否设置了overflow: hidden属性——如果有，把它移除或者改成overflow: auto，避免内容被mask层截断。

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