下层div的滚动条不滚动

正好项目需要, 记录一下,方便遇到这个问题的朋友。

场景: 点击按钮后弹出暗层, 暗层上有组建需要滚动。需求是暗层里的组建可以使用滚动条, 暗层下的不能同时滚动。

不能用overflow:hidden的方式, 因为原来的必须可以滚动, 如果暗层出来设置overflow:hidden的话会使视窗中的界面突然变宽。

最开始想的想法是禁止document的滚动,并且单独给弹窗内需要滚动的组建绑定事件,不冒泡上去。
最后发现不行,虽然document不滚动了, 但是弹窗是position:fixed的,只要鼠标在弹窗的可滚动的元素上,当这个元素的滚动条到底部或者顶部时, 暗层下面的东西还是会滚动,并且没有触发document的滚动。

解决方式是 再给弹窗上的元素绑定滚动事件里面加限制条件:当弹窗中的元素的滚动条滚动到底部或者顶部时,判断滚动是向下还是向下。如果在顶部,且还在向上滚动,则禁止了默认事件。反之。

核心代码:
if([Math Processing Error](obj).scrollTop()>=obj.scrollHeight){console.log(‘bottom’);if(delta<0){console.log(‘to bottom!!’);e.preventDefault();returnfalse;}}if($(obj).scrollTop()===0){console.log(‘top’);if(delta>0){console.log(‘to top!!’);e.preventDefault();returnfalse;}}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值