Javascript 在固定位置div上滚动_Javascript_Css

Javascript 在固定位置div上滚动

javascript css

Javascript 在固定位置div上滚动,javascript,css,Javascript,Css,整个弹出div是可见的，当我垂直滚动时，它会随之出现只有一半的popup-div是可见的，当我垂直滚动时，它会跟随，但不可能查看popup-div的第二部分。这是如何实现的？ css代码： .popup { position:fixed; z-index:9002; background-color:#FFFFFF; border:solid 1px #000000; top: 20%; left: 20%; overflow:

整个弹出div是可见的，当我垂直滚动时，它会随之出现

只有一半的popup-div是可见的，当我垂直滚动时，它会跟随，但不可能查看popup-div的第二部分。这是如何实现的？

css代码：

  .popup
{
    position:fixed;
    z-index:9002;
    background-color:#FFFFFF;
    border:solid 1px #000000;
    top: 20%;
    left: 20%;
    overflow: auto;
}
.popupbackground
{
    background-color:#111;
    opacity:0.65;
    filter:alpha(opacity=65);
    position:fixed;
    z-index: 500;
    top:0px;
    left:0px;
    width: 100%;
     height: 100%;
}

我正在使用ASP.NET，如果回答这个问题需要隐藏代码，我将提供它

我读过一些解决方案，比如将溢出参数设置为自动或滚动，但还没有成功

更新如下：

现在，弹出窗口可以根据需要垂直滚动，但仅当滚动条水平可见时。

在这里，不可能垂直滚动，因为滚动条不可见，而在浏览器中水平滚动只会迫使popupdiv跟随

指定弹出窗口的高度为80%，顶部为10%

尝试以下代码（弹出窗口的内容仅用于测试）：


.弹出窗口
{
位置：固定；
z指数：9002；
背景色：#FFFFFF；
边框：实心1px#000000；
排名前10%；
左：20%；
溢出：自动；
身高：80%；
宽度：40%；
}
.流行音乐背景
{
背景色：#111；
不透明度：0.65；
过滤器：α（不透明度=65）；
位置：固定；
z指数：0；
顶部：0px；
左：0px；
宽度：100%；
身高：100%；
}
a
a
a
a
a
a
a
a
a
a
a
a
a
a

a
a
a
a
a
a
a
a
a
a
a
a
a
a

a
a
a
a
a
a
a
a
a
a
a
a
a
a

a
a
a
a
a
a
a
a
a
a
a
a
a
a

a
a
a
a
a
a
a
a
a
a
a
a
a
a

a
a
a
a
a
a
a
a
a
a
a
a
a
a

a
a
a
a
a
a
a
a
a
a
a
a
a
a

a
a
a
a
a
a
a
a
a
a
a
a
a
a

a
a
a
a
a
a
a
a
a
a
a
a
a
a

a
a
a
a
a
a
a
a
a
a
a
a
a
a

谢谢，这部分奏效了。请参阅我更新的帖子，了解它何时不起作用的解释。

<html>
<head>
<style>
.popup
{
    position:fixed;
    z-index:9002;
    background-color:#FFFFFF;
    border:solid 1px #000000;
    top:10%;
    left: 20%;
    overflow: auto;
    height:80%;
    width:40%;
}

.popupbackground
{
    background-color:#111;
    opacity:0.65;
    filter:alpha(opacity=65);
    position:fixed;
    z-index: 0;
    top:0px;
    left:0px;
    width: 100%;
     height: 100%;
}


</style>
</head>
<body>
<div class="popupbackground">
</div>
<div class="popup">
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
</div>
</body>
</html>