方法一:将body设置为fixed(滚动条会消失,页面会抖动,比较麻烦)

//弹层背景滑动问题
        var top1 = 0;
        function stopBodyScroll(isFixed) {
            var bodyEl = document.body
            if (isFixed) {
                top1 = window.scrollY
                bodyEl.style.position = 'fixed'
                bodyEl.style.top = -top1 + 'px'
            }else{
                bodyEl.style.position = ''
                bodyEl.style.top = ''
                window.scrollTo(0, top1) // 回到原先的top
            }
        }

// 关闭滑动
stopBodyScroll(true);
$('body').css({'position':'fixed',"width":"100%"});

// 开启滑动
stopBodyScroll(false);
$("body").css({"position":"initial"});

方法二:在body上添加overflow:hidden(滚动条会消失,页面会抖动,简单粗暴)

//禁用滚动条
function unScroll(){
	$('body').css("overflow-Y","hidden");
}

//停止禁用滚动条
function removeUnScroll() {
	$('body').css("overflow-Y","hidden");
}

方法三:禁用滚动条(滚动条不会消失,页面不会抖动,jquery提供的,但是有时候不生效)

//禁用滚动条
function unScroll() {
    var top = $(document).scrollTop();
    $(document).on('scroll.unable',function (e) {
        $(document).scrollTop(top);
    })
}
//停止禁用滚动条
function removeUnScroll() {
    $(document).unbind("scroll.unable");
}

方法四:结合方法二添加padding-right(滚动条的宽度,使页面不抖动)

function unScroll(){
	$('body').css("overflow-Y","hidden");
	
	//计算滚动条宽度 (滚动条的宽度不是都为17px的,算一下当前的比较精确)
	const outer = document.createElement('div');
	const inner = document.createElement('div');
	outer.style.overflow = 'scroll';
	document.body.appendChild(outer);
	outer.appendChild(inner);
	const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
	document.body.removeChild(outer);
	
	$(document.body).css( "padding-right",scrollbarWidth);
}

//停止禁用滚动条
function removeUnScroll() {
    $(document.body).css( "overflow-Y","auto");
    $(document.body).css( "padding-right","0px");
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐