修复下拉菜单外区域点击导致页面滚动失效的问题

本文旨在解决在使用固定定位的遮罩层（page blocker）实现点击下拉菜单外部区域关闭菜单时，页面在遮罩层外部区域滚动失效的问题。通过移除遮罩层的position: fixed属性，并探讨替代方案，保证下拉菜单功能的同时，恢复页面的正常滚动。

在使用 JavaScript 和 CSS 创建下拉菜单时，一个常见的需求是：当用户点击菜单外部的区域时，关闭下拉菜单。一种常见的实现方式是创建一个覆盖整个页面的遮罩层（page_blocker），监听其点击事件来关闭菜单。然而，如果这个遮罩层使用了position: fixed属性，可能会导致在遮罩层外部区域滚动失效的问题。

问题分析

当一个元素被设置为position: fixed时，它会相对于视口（viewport）进行定位，这意味着它不会随着页面的滚动而移动。这在某些情况下是很有用的，比如创建固定在屏幕顶部的导航栏。但是，当我们将一个固定定位的元素覆盖整个页面时，它会拦截所有的鼠标事件，包括滚动事件。因此，当鼠标位于遮罩层外部，但仍然在页面可视区域内时，滚动事件会被遮罩层捕获，导致页面无法滚动。

解决方案

最简单的解决方案是移除遮罩层的position: fixed属性。修改后的 CSS 如下：

#page_blocker {
display: none;
position: absolute; /* 将 fixed 改为 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改为position: absolute后，遮罩层会相对于其最近的已定位的祖先元素进行定位。如果它的祖先元素没有设置position属性，那么它会相对于body元素进行定位。

注意事项

1. 祖先元素定位： 确保遮罩层的祖先元素有正确的定位设置，以便遮罩层能够覆盖整个页面。通常，可以将body元素的position设置为relative，或者确保遮罩层的父元素（如例子中的.body_overflow_fix）有明确的高度和宽度。

2. 滚动容器： 如果页面使用了自定义的滚动容器，需要确保遮罩层覆盖整个滚动容器，而不是整个视口。

3. 移动端兼容性： 在移动端，100vh可能会有一些兼容性问题。如果需要确保遮罩层覆盖整个屏幕，可以使用 JavaScript 来动态计算屏幕高度，并将其设置为遮罩层的高度。

总结

通过移除遮罩层的position: fixed属性，并将其替换为position: absolute，可以有效地解决下拉菜单外区域点击导致页面滚动失效的问题。在实际应用中，需要根据具体的页面结构和需求，调整遮罩层的定位方式，确保其能够覆盖整个页面，并实现预期的功能。同时，要注意移动端兼容性，避免出现显示问题。