我一直在寻找一个“灯箱”类型的解决方案，允许这一点，但还没有找到一个(请建议，如果你知道任何)。
我试图重现的行为就像你在Pinterest上点击图片时看到的一样。覆盖层是可滚动的(整个覆盖层向上移动，就像一页在一页的顶部)，但覆盖层后面的主体是固定的。
我试图用CSS创建这个(即一个div覆盖在整个页面和身体溢出:隐藏)，但它不阻止div是可滚动的。
如何保持主体/页面从滚动，但保持滚动在全屏容器内?
当前回答
对于触摸设备，尝试在覆盖的包装中添加一个1px宽，101vh min-height的透明div。然后添加-webkit-overflow-scrolling:touch;overflow-y:汽车;对包装。这将使移动safari误以为覆盖层是可滚动的，从而拦截来自主体的触摸事件。
这是一个示例页面。在移动safari上打开:http://www.originalfunction.com/overlay.html
https://gist.github.com/YarGnawh/90e0647f21b5fa78d2f678909673507f
其他回答
试试这个
var mywindow = $('body'), navbarCollap = $('.navbar-collapse');
navbarCollap.on('show.bs.collapse', function(x) {
mywindow.css({visibility: 'hidden'});
$('body').attr("scroll","no").attr("style", "overflow: hidden");
});
navbarCollap.on('hide.bs.collapse', function(x) {
mywindow.css({visibility: 'visible'});
$('body').attr("scroll","yes").attr("style", "");
});
对于触摸设备，尝试在覆盖的包装中添加一个1px宽，101vh min-height的透明div。然后添加-webkit-overflow-scrolling:touch;overflow-y:汽车;对包装。这将使移动safari误以为覆盖层是可滚动的，从而拦截来自主体的触摸事件。
这是一个示例页面。在移动safari上打开:http://www.originalfunction.com/overlay.html
https://gist.github.com/YarGnawh/90e0647f21b5fa78d2f678909673507f
如果有人正在寻找React函数组件的解决方案，你可以把它放在模态组件中:
useEffect(() => {
document.body.style.overflowY = 'hidden';
return () =>{
document.body.style.overflowY = 'auto';
}
}, [])
你可以用一些“新”css和JQuery轻松做到这一点。
初始:body{…溢出:汽车;} 使用JQuery，你可以在“overlay”和“body”之间动态切换。当使用“body”时，使用
body {
position: static;
overflow: auto;
}
在“叠加”时使用
body {
position: sticky;
overflow: hidden;
}
JQuery for switch('body'->'overlay'):
$("body").css({"position": "sticky", "overflow": "hidden"});
JQuery for switch('overlay'->'body'):
$("body").css({"position": "static", "overflow": "auto"});
使用下面的代码禁用和启用滚动条。
Scroll = (
function(){
var x,y;
function hndlr(){
window.scrollTo(x,y);
//return;
}
return {
disable : function(x1,y1){
x = x1;
y = y1;
if(window.addEventListener){
window.addEventListener("scroll",hndlr);
}
else{
window.attachEvent("onscroll", hndlr);
}
},
enable: function(){
if(window.removeEventListener){
window.removeEventListener("scroll",hndlr);
}
else{
window.detachEvent("onscroll", hndlr);
}
}
}
})();
//for disabled scroll bar.
Scroll.disable(0,document.body.scrollTop);
//for enabled scroll bar.
Scroll.enable();
