gpt4 book ai didi

css - 防止主体滚动但允许灯箱覆盖

转载 作者:行者123 更新时间:2023-12-02 19:42:06 25 4
gpt4 key购买 nike

我正在做一个灯箱,我希望灯箱的覆盖层可以滚动,同时防止主体滚动。这是我试图实现的效果(在所有浏览器上):http://jsfiddle.net/10py25fh/3/

这是迄今为止我的代码的相关部分。

HTML:

<body class="noScroll">
<div class="overlay">
<div class="lightbox">
/*** Lightbox content ***/
</div>
</div>
/*** Lots of other content ***/
</body>

CSS:

.noScroll {
overflow: hidden;
}
.overlay{
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
z-index: 98;
overflow: auto;
}
.lightbox {
z-index: 99;
position: relative;
}

这适用于 IE 和 FF,但不适用于 Chrome 和 Opera。我注意到,如果灯箱高度比 window 大,它就可以在任何地方找到。但是,如果灯箱高度小于窗口,则主体在 Chrome 和 Opera 上保持滚动,但在 IE 和 FF 上仍然有效(不滚动)。

编辑:错误的 jsfiddle 和拼写错误。

最佳答案

这成功了:

首先将覆盖层包装在容器 div (#container) 中。

然后添加以下内容:

    $('#container').on('scroll touchmove mousewheel', function (event) {
event.preventDefault();
});

与overflow:hidden结合使用,适用于safari、ie、ff、chrome和opera。允许覆盖层可滚动,同时主体与每侧的灯箱保持“固定”。

关于css - 防止主体滚动但允许灯箱覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26960314/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com