设置overflow-y:scroll后滚动条显示但无法滚动的问题求助

• 核心问题：z-index: -1 阻断了鼠标交互
  你给.exampleDiv设置了z-index: -1，这会让这个div处于页面默认堆叠上下文的下层（甚至在<body>元素下方）。虽然滚动条能正常显示，但鼠标的滚动事件会被上层元素（比如页面的body）捕获，无法传递到这个div上，导致滚动操作毫无反应。

  解决方法：移除CSS中的z-index: -1声明，或者根据页面布局需求调整z-index为非负值，确保这个div能接收鼠标事件。

• 额外问题：重复的id属性
  你的HTML里有多个<p>标签使用了id="Text"，这违反了HTML规范——id必须是页面唯一的。虽然这不是导致滚动失效的直接原因，但后续如果通过id操作这些元素（比如JS获取），会出现不可预期的问题，建议改成class或者给每个元素设置唯一的id。

修改后的CSS示例：

.exampleDiv {
  background-color: white;
  width: 96vw;
  height: 80vh;
  border-color: gray;
  border-style: solid;
  text-align: center;
  position: relative;
  /* 移除z-index: -1 */
  overflow-y: scroll;
  scroll-behavior: smooth;
}

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