JQ实现弹窗滚动背景页面不跟随滚动

JQ实现弹窗滚动背景页面不跟随滚动

1. 情景：当自己写的弹窗使用overflow滚动的时候，其背景页面也是设置了overflow可以滚动的，这时候当弹窗滚动到底部时，背景页面会开始滚动，而滚动弹窗没有反应了。
2. 解决问题：弹窗滚动，页面背景就不能滚动
3. 思路：当弹窗弹出时，设置背景页面的bodyposition属性值为fixed固定住页面不能拖动，并让它置于顶部，然后当关闭弹窗的时候再恢复背景 页面滑动，设置position属性值为static

$(function(){
    /*ios输入框失焦置顶 HXH*/
    document.body.addEventListener("focusout", () => {
		//软键盘收起的事件处理
		setTimeout(() => {
		  const scrollHeight = 
		  	document.documentElement.scrollTop || document.body.scrollTop || 0;
		  window.scrollTo(0, Math.max(scrollHeight - 1, 0));
		}, 100);
    });
    
    // $('.bg').height($('.bg')[0].clientHeight);
    
    //弹窗背景禁止滑动
    $('.rule').click(function(){//点击按钮弹出弹窗
        fixed()
    })
    $('#rule-close').click(function(){//点击按钮关闭弹窗
        fixed_cancel()
    })
})
//触发弹窗底部页面禁止滑动
function fixed(){
    var scrollTop = document.body.scrollTop;//设置背景元素的位置
    $('.bg').attr('data-top',scrollTop);
    $('.bg').css('position','fixed')
    $('.bg').css('top',"-"+scrollTop+"px")
}
   
//关闭弹窗底部页面恢复滑动
function fixed_cancel(){
    var scrollTop = $('.bg').attr('data-top');//设置背景元素的位置
    $('.bg').css('position','static')
    $('.bg').css('top','0px')
    $(document).scrollTop(scrollTop);//scrollTop,设置滚动条的位置
}

参考链接：（jQuery实现弹窗下底部页面禁止滑动效果）https://www.jb51.net/article/130885.htm