我一直在寻找一个“灯箱”类型的解决方案，允许这一点，但还没有找到一个(请建议，如果你知道任何)。
我试图重现的行为就像你在Pinterest上点击图片时看到的一样。覆盖层是可滚动的(整个覆盖层向上移动，就像一页在一页的顶部)，但覆盖层后面的主体是固定的。
我试图用CSS创建这个(即一个div覆盖在整个页面和身体溢出:隐藏)，但它不阻止div是可滚动的。
如何保持主体/页面从滚动，但保持滚动在全屏容器内?
当前回答
所选的答案是正确的，但有一些局限性:
用你的手指进行超硬的“投掷”仍然会在后台滚动<body> 在模态中点击<input>打开虚拟键盘将引导所有未来滚动到<body>
我没有解决第一个问题，但想对第二个问题有所了解。令人困惑的是，Bootstrap曾经记录了键盘问题，但他们声称已经修复，并引用http://output.jsbin.com/cacido/quiet作为修复的例子。
事实上，这个例子在我的iOS测试中运行良好。但是，将其升级到最新的Bootstrap (v4)会破坏它。
为了弄清楚它们之间的区别，我减少了一个测试用例，使其不再依赖于Bootstrap, http://codepen.io/WestonThayer/pen/bgZxBG。
决定因素很奇怪。避免键盘问题似乎要求没有在包含模态的根目录<div>上设置background-color，并且模态的内容必须嵌套在另一个<div>中，可以设置background-color。
要测试它，在Codepen示例中取消注释下面的行:
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
/* UNCOMMENT TO BREAK */
/* background-color: white; */
}
其他回答
如果有人正在寻找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"});
所选的答案是正确的，但有一些局限性:
用你的手指进行超硬的“投掷”仍然会在后台滚动<body> 在模态中点击<input>打开虚拟键盘将引导所有未来滚动到<body>
我没有解决第一个问题，但想对第二个问题有所了解。令人困惑的是，Bootstrap曾经记录了键盘问题，但他们声称已经修复，并引用http://output.jsbin.com/cacido/quiet作为修复的例子。
事实上，这个例子在我的iOS测试中运行良好。但是，将其升级到最新的Bootstrap (v4)会破坏它。
为了弄清楚它们之间的区别，我减少了一个测试用例，使其不再依赖于Bootstrap, http://codepen.io/WestonThayer/pen/bgZxBG。
决定因素很奇怪。避免键盘问题似乎要求没有在包含模态的根目录<div>上设置background-color，并且模态的内容必须嵌套在另一个<div>中，可以设置background-color。
要测试它，在Codepen示例中取消注释下面的行:
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
/* UNCOMMENT TO BREAK */
/* background-color: white; */
}
React功能组件的一个解决方案是使用useEffect钩子。
下面是下面的代码示例(请注意useEffect定义):
import {useEffect, useRef} from "react";
export default function PopoverMenu({className, handleClose, children}) {
const selfRef = useRef(undefined);
useEffect(() => {
const isPopoverOpenned = selfRef.current?.style.display !== "none";
const focusedElement = document?.activeElement;
const scrollPosition = {x: window.scrollX, y: window.scrollY};
if (isPopoverOpenned) {
preventDocBodyScrolling();
} else {
restoreDocBodyScrolling();
}
function preventDocBodyScrolling() {
const width = document.body.clientWidth;
const hasVerticalScrollBar = (window.innerWidth > document.documentElement.clientWidth);
document.body.style.overflowX = "hidden";
document.body.style.overflowY = hasVerticalScrollBar ? "scroll" : "";
document.body.style.width = `${width}px`;
document.body.style.position = "fixed";
}
function restoreDocBodyScrolling() {
document.body.style.overflowX = "";
document.body.style.overflowY = "";
document.body.style.width = "";
document.body.style.position = "";
focusedElement?.focus();
window.scrollTo(scrollPosition.x, scrollPosition.y);
}
return () => {
restoreDocBodyScrolling(); // cleanup on unmount
};
}, []);
return (
<>
<div
className="backdrop"
onClick={() => handleClose && handleClose()}
/>
<div
className={`pop-over-menu${className ? (` ${className}`) : ""}`}
ref={selfRef}
>
<button
className="pop-over-menu--close-button" type="button"
onClick={() => handleClose && handleClose()}
>
X
</button>
{children}
</div>
</>
);
}
最初发表于另一个相关的Stackoverflow问题:https://stackoverflow.com/a/69016517/14131330
使用下面的代码禁用和启用滚动条。
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();
