关于小窗滑动,父级body也跟随滑动的解决方案

需求:当前页面是信息列表,所以高度由内容自动填充,

所以页面可以上下滑动,加载更多,

但是下发物料一栏又为一个列表

所以做了一个弹窗框,因为是列表所以高度自然又是不可控的,所以给了一个最大高度,当超出以后可滑动,即overflow:scroll,

此时就遇到了问题,当我弹窗信息过多,需要滑动时,弹窗滑动,下面的body也会跟着滑动,所以此时必须要解决body滑动的问题。

然后就开始在scroll上做文章,监听scroll,动态给body添加overflow:hidden的属性,当关闭的时候再把该属性清除掉,

想的非常美,可是有遇到问题了,ul的高度大于我设定的最大高度时body可以添加上overflow:hidden的属性,可当ul的高度小于最大高度呢,此时的并没有触发scroll方法,

然后就各种想办法,想要得到弹窗的坐标,再得到当前点击的坐标判断是否在弹窗区域内,当在弹窗区域内不就可以触发了呗,搞了半天,结果突然醍醐灌顶,

发现一个大问题,我为什么不能在刚开始触发弹窗的时候就给body添加overflow:hidden的属性呢,不管此时的ul的高度时多少,body都是不能再滑动的,于是,终于大功告成。 

 

posted @ 2017-06-08 15:23  伊优  阅读(694)  评论(2编辑  收藏  举报