拨开滚动穿透迷雾，你的模态框滚动起来就会了吗？

2023-10-17 12:39:05

俗话说，产品有三宝：弹窗、浮层加引导，足以见弹窗在产品同学心目中的地位。对任意一个刚入门的前端同学来说，实现一个模态框基本都可以达到信手拈来的地步，但是，当模态框里边的内容滚动起来以后，就会出现各种各样的让人摸不着头脑的问题，其中，最出名的想必就是滚动穿透。

那么，什么是滚动穿透呢？简单来说，滚动穿透是指模态框内的滚动条无法正常滚动，反而导致模态框外的页面内容发生滚动。这种现象不仅影响用户体验，也可能导致严重的性能问题。

滚动穿透的原理

要解决滚动穿透问题，首先需要了解其背后的原理。当模态框出现时，通常会采用绝对定位或 fixed 定位将其固定在页面上。当模态框的内容超出了其可视区域时，就会出现滚动条。此时，如果模态框的内容区域没有设置 overflow: scroll，那么滚动事件就会传递到模态框外，导致模态框外的页面内容发生滚动。

滚动穿透的解决方案

解决滚动穿透问题，最直接的方法就是在模态框的内容区域设置 overflow: scroll，这样就可以让模态框内的滚动条正常工作。然而，这并不是一个完美的解决方案，因为这样可能会导致模态框内的内容与模态框边缘重叠。

为了解决这个问题，我们可以使用 flex 布局或 position: absolute 定位来调整模态框内内容的位置。这样既可以保证模态框内的滚动条正常工作，又可以防止模态框内的内容与模态框边缘重叠。

不同浏览器的兼容性

在解决滚动穿透问题时，还需要考虑不同浏览器的兼容性。在大多数情况下，上述解决方案都可以在主流浏览器中正常工作。然而，在某些情况下，可能会遇到一些兼容性问题。

例如，在 iOS 设备上，如果模态框的内容区域设置了 overflow: scroll，那么在滚动时可能会出现卡顿现象。这是因为 iOS 设备上的浏览器默认启用了滚动阻尼效果，这会导致滚动时出现一定的延迟。为了解决这个问题，可以在模态框的内容区域添加 touchmove 事件监听器，并在事件处理函数中阻止默认行为。