弹框出来以后禁止页面滚动
2020-05-08 本文已影响0人
代艳霞
项目中的一些公告内容，总是通过弹框的形式来实现，当弹框的内容太多，需要滚动提示，但此时我们滚动弹框，整个页面也会跟着滚动，用户体验不是太好，如何解决这个问题，很简单，我们可以在弹框显示以后，禁止页面滚动，等弹框消失以后再让页面滚动，代码如下，可以分别在弹框显示和隐藏的时候调用实现效果。
//禁止弹框后的页面跟随滚动
function fixed(){
var scrollTop = $("body").scrollTop;//设置背景元素的位置
$('#body').attr('data-top',scrollTop);
var contentStyle = document.getElementById("body").style;//content是可以滚动的背景元素id名称
contentStyle.position = 'fixed'; //contentStyle是第二步的变量，设置背景元素的position属性为‘fixed’
contentStyle.top = "-"+scrollTop+"px";
}
//关闭弹窗底部页面恢复滑动
function fixed_cancel(){
var contentStyle = document.getElementById("body").style;
var scrollTop = $('#body').attr('data-top');//设置背景元素的位置
contentStyle.top = '0px';//恢复背景元素的初始位置
contentStyle.position ="static";//恢复背景元素的position属性（初始值为absolute，就恢复为absolute，以此类推）
$("body").scrollTop(scrollTop);//scrollTop,设置滚动条的位置
}
var bodys = "<body></body><div id=body></div></body>"
