我一直在寻找一个“灯箱”类型的解决方案,允许这一点,但还没有找到一个(请建议,如果你知道任何)。
我试图重现的行为就像你在Pinterest上点击图片时看到的一样。覆盖层是可滚动的(整个覆盖层向上移动,就像一页在一页的顶部),但覆盖层后面的主体是固定的。
我试图用CSS创建这个(即一个div覆盖在整个页面和身体溢出:隐藏),但它不阻止div是可滚动的。
如何保持主体/页面从滚动,但保持滚动在全屏容器内?
我一直在寻找一个“灯箱”类型的解决方案,允许这一点,但还没有找到一个(请建议,如果你知道任何)。
我试图重现的行为就像你在Pinterest上点击图片时看到的一样。覆盖层是可滚动的(整个覆盖层向上移动,就像一页在一页的顶部),但覆盖层后面的主体是固定的。
我试图用CSS创建这个(即一个div覆盖在整个页面和身体溢出:隐藏),但它不阻止div是可滚动的。
如何保持主体/页面从滚动,但保持滚动在全屏容器内?
当前回答
如果你想在ios上防止过度滚动,你可以在你的.noscroll类中添加位置固定
body.noscroll{
position:fixed;
overflow:hidden;
}
其他回答
我发现这个问题试图解决我在Ipad和Iphone上的页面问题-当我显示固定div为弹出图像时,身体正在滚动。
有些答案很好,但没有一个解决了我的问题。我找到了下面这篇由Christoffer Pettersson撰写的博文。解决方案提出了帮助问题,我与iOS设备,它帮助我的滚动背景问题。
关于iOS Safari的橡皮筋滚动,我了解到了6件事
正如建议的那样,我包括博客文章的主要观点,以防链接过时。
为了禁止用户在“菜单打开”时滚动后台页面,可以通过应用一些JavaScript和CSS类来控制应该允许滚动或不允许滚动哪些元素。
基于这个Stackoverflow答案,您可以控制禁用滚动的元素不应该 当touchmove事件被触发时,执行默认的滚动操作。”
document.ontouchmove = function ( event ) {
var isTouchMoveAllowed = true, target = event.target;
while ( target !== null ) {
if ( target.classList && target.classList.contains( 'disable-scrolling' ) ) {
isTouchMoveAllowed = false;
break;
}
target = target.parentNode;
}
if ( !isTouchMoveAllowed ) {
event.preventDefault();
}
};
然后把禁用滚动类放到页面div上:
<div class="page disable-scrolling">
大多数解决方案都存在无法保留滚动位置的问题,所以我研究了Facebook是如何做到这一点的。除了将底层内容设置为position: fixed之外,他们还动态设置顶部以保留滚动位置:
scrollPosition = window.pageYOffset;
mainEl.style.top = -scrollPosition + 'px';
然后,当你再次移除覆盖时,你需要重置滚动位置:
window.scrollTo(0, scrollPosition);
我创建了一个小示例来演示这个解决方案
let overlayShown = false; let scrollPosition = 0; document.querySelector('.toggle').addEventListener('click', function() { if (!overlayShown) { showOverlay(); } else { removeOverlay(); } overlayShown = !overlayShown; }); function showOverlay() { scrollPosition = window.pageYOffset; const mainEl = document.querySelector('.main-content'); mainEl.style.top = -scrollPosition + 'px'; document.body.classList.add('show-overlay'); } function removeOverlay() { document.body.classList.remove('show-overlay'); window.scrollTo(0, scrollPosition); const mainEl = document.querySelector('.main-content'); mainEl.style.top = 0; } .main-content { background-image: repeating-linear-gradient( lime, blue 103px); width: 100%; height: 200vh; } .show-overlay .main-content { position: fixed; left: 0; right: 0; overflow-y: scroll; /* render disabled scroll bar to keep the same width */ /* Suggestion to put: overflow-y: hidden; Disabled scrolling still makes a mess with its width. Hiding it does the trick. */ } .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); overflow: auto; } .show-overlay .overlay { display: block; } .overlay-content { margin: 50px; background-image: repeating-linear-gradient( grey, grey 20px, black 20px, black 40px); height: 120vh; } .toggle { position: fixed; top: 5px; left: 15px; padding: 10px; background: red; } /* reset CSS */ body { margin: 0; } <main class="main-content"></main> <div class="overlay"> <div class="overlay-content"></div> </div> <button class="toggle">Overlay</button>
你可以用一些“新”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"});
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
一般来说,如果你想让父对象(在本例中是body)在子对象(在本例中是overlay)滚动时阻止它滚动,那么让子对象成为父对象的兄弟对象,以防止滚动事件冒泡到父对象。在父元素是body的情况下,这需要一个额外的包装元素:
<div id="content">
</div>
<div id="overlay">
</div>
使用浏览器的主滚动条滚动特定DIV内容以查看其工作情况。