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()