Open FE92star opened 3 years ago
弹窗内容在滚动到顶部或底部的时候，再进行强行滚动，就会出现“滚动穿透”
滚动的目标元素可以是document和其中的element，不过需要明确的一点是弹窗上的具体元素的scroll事件是不会向上冒泡的，所以就不存在是具体元素的事件冒泡到父节点，也就无法通过阻止父元素的默认事件来阻止滚动；
根据浏览器规范，如果目标节点无法滚动，则会自动触发尝试document的滚动，如果document能滚动则下方文档就可滚动。
弹窗出现时给body标签设置overflow:hidden属性，导致用户之前的滚动行为会被重置；
overflow:hidden
通过JS来控制内容区的默认滚动事件。监听到弹窗内容区滚动到顶部或底部时，再阻止内容容器的默认行为——event. preventDefault()
什么是“滚动穿透”？
弹窗内容在滚动到顶部或底部的时候，再进行强行滚动，就会出现“滚动穿透”
为什么会出现？
滚动的目标元素可以是document和其中的element，不过需要明确的一点是弹窗上的具体元素的scroll事件是不会向上冒泡的，所以就不存在是具体元素的事件冒泡到父节点，也就无法通过阻止父元素的默认事件来阻止滚动；
根据浏览器规范，如果目标节点无法滚动，则会自动触发尝试document的滚动，如果document能滚动则下方文档就可滚动。
解决方案
弹窗出现时给body标签设置
overflow:hidden属性，导致用户之前的滚动行为会被重置；通过JS来控制内容区的默认滚动事件。监听到弹窗内容区滚动到顶部或底部时，再阻止内容容器的默认行为——event. preventDefault()