Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/83.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/neo4j/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery 仅滚动一个div';使用主滚动条显示内容_Jquery_Html_Css - Fatal编程技术网

Jquery 仅滚动一个div';使用主滚动条显示内容

Jquery 仅滚动一个div';使用主滚动条显示内容,jquery,html,css,Jquery,Html,Css,我正在努力,但我没有想出一个解决这个相当简单的问题的办法 基本上我想要的是有一个固定的主体,有一个垂直和水平居中的矩形div来承载我的内容。正文不会滚动,但div的内容应该滚动 换句话说,我想要的基本上是在底层有一个完整的页面,整个背景(比如说,一个全宽的图像),在这个背景层上有一个div承载我的内容,独立滚动 我的代码中基本上有三个嵌套层: 1) 主体(溢出:隐藏)、2)一个全宽透明容器(溢出-y:滚动)和3)居中的div,该div应该承载所有我的内容(位置:绝对) 问题是,没有任何东西在滚动

我正在努力,但我没有想出一个解决这个相当简单的问题的办法

基本上我想要的是有一个固定的主体,有一个垂直和水平居中的矩形div来承载我的内容。正文不会滚动,但div的内容应该滚动

换句话说,我想要的基本上是在底层有一个完整的页面,整个背景(比如说,一个全宽的图像),在这个背景层上有一个div承载我的内容,独立滚动

我的代码中基本上有三个嵌套层:

1) 主体(溢出:隐藏)、2)一个全宽透明容器(溢出-y:滚动)和3)居中的div,该div应该承载所有我的内容(位置:绝对)

问题是,没有任何东西在滚动。如果我尝试将overflow-y:scroll或auto添加到居中的div中,它会显示一个丑陋的滚动条,这不是我想要的-我想使用“主”主体滚动条进行滚动

html,正文{
保证金:0;
背景颜色:浅灰色;
溢出:隐藏;
}
.集装箱{
溢出y:滚动;
宽度:100%;
高度:100vh;
背景色:红色;
} 
.覆盖{
位置:绝对位置;
宽度:90%;
高度:90vh;
背景颜色:浅灰色;
保证金:自动;
排名:0;
右:0;
底部:0;
左:0;
-webkit盒阴影:0px 0px 60px-2px rgba(0,0,0,0.75);
-moz盒阴影:0px 0px 60px-2px rgba(0,0,0,0.75);
盒子阴影:0px 0px 60px-2px rgba(0,0,0,0.75);
z指数:10;
}

乱数假文
Lorem ipsum dolor sit amet,是一位杰出的献身者。南乌尔普塔特
arcu坐在malesuada广场上,或坐在facilisis广场上。乌贼
智人。Nunc调味品,不含tincidunt,sem mi hendrerit nisi,
eget blandit elit diam nec
埃尼姆。Vivamus imperite nisi auctor nisl auctor,在aliquam lectus luctus。
莫里斯·诺森·托托。无便利。两个是临时的。福斯
卢克图斯·波苏尔·弗里利亚。莫比·莫莱斯蒂·托托·奎斯·索达莱斯
胡说八道。欧洲国家电力公司(nec)在威尼斯国家电力公司(nec)成立。
我们的智慧和智慧来自于我们的智慧

Lorem ipsum dolor sit amet,是一位杰出的献身者。南乌尔普塔特 arcu坐在malesuada广场上,或坐在facilisis广场上。乌贼 智人。Nunc调味品,不含tincidunt,sem mi hendrerit nisi, eget blandit elit diam nec 埃尼姆。Vivamus imperite nisi auctor nisl auctor,在aliquam lectus luctus。 莫里斯·诺森·托托。无便利。两个是临时的。福斯 卢克图斯·波苏尔·弗里利亚。莫比·莫莱斯蒂·托托·奎斯·索达莱斯 胡说八道。欧洲国家电力公司(nec)在威尼斯国家电力公司(nec)成立。 我们的智慧和智慧来自于我们的智慧

Lorem ipsum dolor sit amet,是一位杰出的献身者。南乌尔普塔特 arcu坐在malesuada广场上,或坐在facilisis广场上。乌贼 智人。Nunc调味品,不含tincidunt,sem mi hendrerit nisi, eget blandit elit diam nec 埃尼姆。Vivamus imperite nisi auctor nisl auctor,在aliquam lectus luctus。 莫里斯·诺森·托托。无便利。两个是临时的。福斯 卢克图斯·波苏尔·弗里利亚。莫比·莫莱斯蒂·托托·奎斯·索达莱斯 胡说八道。欧洲国家电力公司(nec)在威尼斯国家电力公司(nec)成立。 我们的智慧和智慧来自于我们的智慧


您需要向覆盖元素添加相同的溢出属性

.overlay {
      overflow-y: scroll;
}

根据您的需要,您实际上不需要容器上的溢出,您只需要将溢出的元素的父元素上的溢出。在这种情况下,p

这不是直接可能的,但可以通过覆盖某些部分使其看起来如此

html{
保证金:0;
填充:0;
}
身体{
保证金:0;
填充:10vh 10vw;
}
正文,.bg{
背景色:#ddd;
背景图像:url('https://lorempixel.com/638/220/abstract/');
背景附件:固定;
背景位置:中心;
背景尺寸:封面;
}
h1{
保证金:0.01勒姆;
}
p{
保证金:1rem 0;
}
p:最后一个孩子{
页边距底部:0;
}
#垫面{
位置:固定;
排名:0;
右:0;
左:0;
宽度:100vw;
高度:10vh;
}
#垫底{
位置:固定;
右:0;
底部:0;
左:0;
宽度:100vw;
高度:10vh;
}
#内容大纲{
位置:固定;
顶部:10vh;
右:10vw;
底部:10vh;
左:10vw;
边框:1px实心#000;
盒影:1px1px2pRGBA(0,0,0,0.7);
}
#内容{
填充:1rem;
背景色:rgba(255、255、255、0.5);
}

乱数假文
Lorem ipsum dolor sit amet,是一位杰出的献身者。Nunc sodales Nunc eu est semper eleifend。这句话的意思是:“我不相信你。多涅克土拨鼠(Donec dapibus turpis eget mauris ultricies lobortis)。这是一只猫科动物的粪便。奥古斯特·卢克图斯、发酵舌苔、智者功效。埃尼安和尼西·里苏斯。这是自由之门,威尼斯人的自由之门。这是一个不公平的事实。怀孕的女佣。Donec nec aliquet mauris。菲舍勒斯·劳里特坐在奥纳雷的埃拉特。多奈克·鲁图姆·努拉·自由,他是一位伟大的领袖。多奈克苏打水、紫罗兰、乌尔特里斯、不知名的turpis diam urna。在苏西皮特的孕妇中,精英们是崔斯蒂克。前庭,前庭,前庭,前庭,前庭,前庭。Donec enim Elite,lacinia Vita urna a,tincidunt sagittis nunc

前无明渠、非维维拉自由人、奥迪奥精英、普普洛斯普洛斯普洛斯普洛斯普洛斯普洛斯普洛斯普洛斯。莫比·莫里斯自由女神,封建主义者比本杜姆和前总统莫比·弗林利亚·康瓦利斯。乌拉姆科珀酒后驾车和酒后驾车
#header {
    background-color:red;
    width:100vw;
    height:20px;
    position:fixed;
    top:0;
}

#footer {
    background-color:red;
    width:100vw;
    height:20px;
    position:fixed;
    bottom:0;
}