问题概述
正如摘要所说，当使用固定定位的遮罩层（page_blocker）来检测下拉菜单外部点击时，可能会导致在遮罩层区域滚动页面失效。下面我们详细分析这个问题，并给出解决方案。
问题分析
问题的原因在于 page_blocker 元素使用了 position: fixed;。当一个元素被设置为固定定位时，它会相对于视口（viewport）进行定位，这意味着它脱离了正常的文档流。
当遮罩层覆盖整个页面时，鼠标在遮罩层区域的滚动事件不会传递到下方的 body 元素，导致页面滚动失效。只有当鼠标位于下拉菜单内部时，滚动事件才能正常传递，因为下拉菜单位于遮罩层上方（z-index 控制）。
解决方案
解决办法很简单：移除 page_blocker 元素的 position: fixed; 属性。
修改后的 CSS 代码如下：
#page_blocker {
display: none;
position: absolute; /* 修改为 absolute */
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
background-color: rgba(0, 0, 0, 0.2);
}
#page_blocker.open {
display: block;
}将 position 从 fixed 修改为 absolute 后，page_blocker 将相对于其最近的已定位祖先元素进行定位。在这个例子中，body_overflow_fix 是它的已定位祖先元素，因为 html, body 设置了 height: 100%，而 body_overflow_fix 内部的元素会跟随页面滚动。
完整代码示例 (修改后的CSS)
html, body {
height: 100%;
}
.body_overflow_fix {
width: 100%;
height: 100%;
overflow-x: hidden;
}
header {
position: relative;
height: 100%;
background-color: #eee;
}
#btn_dropdown {
margin: 0 auto;
text-align: center;
width: 100px;
padding: 1rem;
background-color: skyblue;
cursor: pointer;
}
#content_dropdown {
display: none;
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
z-index: 10;
background-color: orange;
}
#content_dropdown.open {
display: block;
}
#page_blocker {
display: none;
position: absolute; /* 修改为 absolute */
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
background-color: rgba(0, 0, 0, 0.2);
}
#page_blocker.open {
display: block;
}
main {
background-color: #ddd;
height: 500px;
}注意事项
- 确保 page_blocker 的父元素（在这个例子中是 header）具有 position: relative; 或其他定位属性，以便 absolute 定位能够正确工作。
- 如果页面结构复杂，可能需要调整 page_blocker 的父元素，以确保其覆盖整个可视区域。
总结
通过将遮罩层的 position 属性从 fixed 修改为 absolute，可以有效解决下拉菜单打开时页面滚动失效的问题。这种方法简单易行，能够提升用户体验，确保页面在任何情况下都能正常滚动。在实际开发中，需要根据具体的页面结构和需求进行调整，以达到最佳效果。
