微信body和弹出层都有滚动条，overflow:auto失效解决方案。

最新推荐文章于 2025-08-05 14:57:41 发布

和尚敲代码

最新推荐文章于 2025-08-05 14:57:41 发布

阅读量1.7k

点赞数

分类专栏：前端

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在网页开发中解决禁止body滚动时弹出层滚动失效的问题，并提供了具体的JavaScript实现方法。同时，还分享了如何通过CSS控制弹出层滚动而保持body不滚动的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 禁止body滚动后，弹出层滚动overflow:auto失效；

var DivScroll = function( layerNode ){
//如果没有这个元素的话，那么将不再执行下去
if ( !document.querySelector( layerNode ) ) return ;

this.popupLayer = document.querySelector( layerNode ) ;
this.startX = 0 ;
this.startY = 0 ;

this.popupLayer.addEventListener('touchstart', function (e) {
this.startX = e.changedTouches[0].pageX;
this.startY = e.changedTouches[0].pageY;
}, false);

// 仿innerScroll方法
this.popupLayer.addEventListener('touchmove', function (e) {

e.stopPropagation();

var deltaX = e.changedTouches[0].pageX - this.startX;
var deltaY = e.changedTouches[0].pageY - this.startY;

// 只能纵向滚
if(Math.abs(deltaY) < Math.abs(deltaX)){
e.preventDefault();
return false;
}

if( this.offsetHeight + this.scrollTop >= this.scrollHeight){
if(deltaY < 0) {
e.preventDefault();
return false;
}
}
if(this.scrollTop === 0){
if(deltaY > 0) {
e.preventDefault();
return false;
}
}
// 会阻止原生滚动
// return false;
},false);

}

//调用
var divScroll = new DivScroll('.menuList');

2. 弹出层滚动，禁止body滚动：
$('html').css({"height":"100%","overflow":"hidden"});
$('body').css({"height":"100%","overflow":"hidden"});
弹出层关闭后：
$('html').css({"height":"auto","overflow":"auto"});
$('body').css({"height":"auto","overflow":"auto"});