CSS动画与滚动栏冲突求助：页面无滚动栏无法滚动

• 根本原因不是CSS动画和滚动有固有冲突，问题出在这两个布局设置上：

  • body加了overflow: hidden：这个属性会把超出视口的内容直接隐藏，同时直接禁用页面的滚动功能
  • section用了绝对定位且设了height: 100vh：绝对定位会让元素脱离正常文档流，100vh又把section高度固定成和视口一样高，导致整个页面的高度被限制在视口范围内，根本没有可滚动的溢出内容

• 修复方法：

  1. 删掉body的overflow: hidden，或者改成overflow: auto（这是默认值，能让页面在内容超出时自动显示滚动条）
  2. 调整section的定位，比如换成相对定位（position: relative）；如果非要用绝对定位，就去掉height: 100vh，让section根据里面的故事内容自动撑开高度，这样当页面总高度超过视口时，滚动条自然就会出现

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