嵌套后Div元素停止滚动的问题求助

问题根源在于左侧最外层容器设置了z-index: -1，这个值会把整个左侧区域压到页面底层，导致鼠标的滚动、点击等交互事件无法传递到滚动元素上，自然无法触发滚动。

修复方案 #

移除左侧容器及内部logoBlock的z-index: -1样式，恢复元素的交互层级：

修复后的完整代码 #

CSS 代码

body {
  margin: 0;
  overflow-x: hidden;
}

#contentbg::before {
  content: "";
  background: linear-gradient(to bottom, rgb(0, 0, 0, 0.1), rgb(0, 0, 0, 0.3));
  position: absolute;
  width: 10px;
  height: 100%;
  z-index: -1;
  filter: blur(10px);
}

.display {
  border: solid red 1px;
}

.flex {
  display: flex;

  .align {
    flex-grow: 1;
  }
}

HTML 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side Script</title>
    <link rel="stylesheet" href="./Stylesheets/style.css">
    <link rel="icon" href="./Assets/Images/SideScript S.png">
    <script src="./Scripts/SearchHandler.js"></script>
    <script src="./articles.js"></script>
</head>

<body class="flex">
    <div style="width: 280px; height: 100vh; background: whitesmoke; position: relative;">
        <div id="logoBlock" class="flex"
            style="flex-direction: column; position: relative; background: white; width: 280px; height: 230px;">
        </div>

        <div class="display" style="position: relative; height: 300px; width: 100px; overflow: scroll;">
            <div style="height: 30px; width: 100px;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi est molestias optio necessitatibus, nesciunt, amet architecto explicabo voluptate placeat adipisci ea cum doloribus quae reprehenderit, ipsum porro. Autem, necessitatibus ad?</div>
        </div>
    </div>

    <div class="align">
        <div id="contentbg" style="position: absolute; width: 30px; height: 100%; background: white;"></div>
        <div class="display" style="position: relative; height: 300px; width: 100px; overflow: scroll;">
            <div style="height: 30px; width: 100px;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi est molestias optio necessitatibus, nesciunt, amet architecto explicabo voluptate placeat adipisci ea cum doloribus quae reprehenderit, ipsum porro. Autem, necessitatibus ad?</div>
        </div>
    </div>
</body>

</html>

如果原本设置z-index: -1是为了实现视觉层级效果，建议调整其他背景元素的层级，而非将可交互区域压到底层，避免破坏元素的交互性。

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