今天遇到一个问题，记录一下

问题：有一个需求是需要一个 弹窗来显示菜单内容

好的，问题来了。这时候ui差不多写好了，然后想滚动一下，看看效果。
诶？？？怎么弹窗内容没滚动，主要内容部分怎么滚动了？？？？

以下是个人的理解

当用户开始滚动的时候，页面响应滚动有两种类型

1、document 滚动

2、可滚动 element 滚动

只有两种类型，就是说，一旦有滚动行为发生，那么就必然产生这两个类型其中之一

如果 element 可以滚动，那么就 滚动 element

如果 element 无法滚动，那么就让 document 响应滚动

是一个 if-else 的关系

这个element 无法滚动包括

1. 没有设置可滚动overflow属性
2. 监听回调 设置了 preventDefault
3. 已经滚动到底端或顶端

为什么会觉得这个这个行为是合理性，我的理解是

用户产生滚动行为，浏览器就必须要响应这个行为，产生滚动的反馈，这才是正常的。尽可能响应，滚动一切当前操作可以滚动的元素

只是当把元素设置了 fixed 之后让人感觉是个bug，浏览器没有必要对 fixed 元素做特殊处理，两个不相关的东西，不可能耦合起来

怎么解决滚动穿透

我们理解了滚动穿透的原因之后，我们就可以对症下药了

既然 document 是备胎滚动选项，那么就让 document 不可滚动
这是现在情况，当我点击滑动弹层时，背景也会随着滑动，所以出现一个问题，弹层是点击不到的。
所以这里采取一个做法：给父元素加上（$\color{red}{钉钉小程序}$）

待后续测试有无兼容问题在做更新！！不同的不会有不同的写法，我这种是背景会滚动，弹层没滚动情况下使用的。

还有在网站搜索，看到说这种会有兼容性问题。

其他的方法

一、body无滚动 + 弹层无滚动[css-超出隐藏]

适用场景需满足以下条件：

    1、body最好是一屏、无滚动

    2、虽然body内容超出一屏需滚动，但触发弹层出现的按钮在第一屏中

    3、弹层不用滚动效果 解决方案： 弹层出现时，用css给body设置固定定位和超出隐藏。 关键代码：

btn.onclick = function() {
// 弹层出现
layer.style.display ='block';
document.body.style.overflow = 'hidden';
document.body.style.position = 'fixed';//果然是因为加了fixed，就会自动回滚到顶部`
}
var closeBtn = document.getElementById('close');
closeBtn.onclick = function() {
// 弹层关闭
layer.style.display = 'none';
document.body.style.overflow = 'auto';
document.body.style.position = 'static';
}

！！更新