js禁止滚动条滚动
方法一:将body设置为fixed(滚动条会消失,页面会抖动,比较麻烦)//弹层背景滑动问题var top1 = 0;function stopBodyScroll(isFixed) {var bodyEl = document.bodyif (isFixed) {top1 = window.scrollYbodyEl.style.position =
·
方法一:将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");
}
更多推荐
已为社区贡献1条内容
所有评论(0)