[英]Content shows scrollbar but is not scrollable
我不希望内容向上滚动,但是在菜单后面永远不应该可见。 这很难,因为它是透明的。 因此,我使用div将其用作蒙版。 但是由于某些原因,我的内容无法滚动。
HTML:
<div class="title">
title
</div>
<div class="menu">
menu
<button class="btn">Foo</button>
</div>
<div class="content-mask">
<div class="asfsadf">
scroll content<br/>
scroll content<br/>
scroll content<br/>
scroll content<br/>
scroll content<br/>
</div>
</div>
CSS:
.title {
position: fixed;
top: 0;
}
.menu {
position: fixed;
top: 20px;
border: 1px solid black;
}
.content-mask {
position: fixed;
top: 40px;
overflow: scroll;
}
.content {
}
body {
background-image: url("https://pbs.twimg.com/media/ChtN47lVAAAQWD1.jpg:large");
}
为.content-mask增加高度:
.content-mask {
position: fixed;
top: 40px;
overflow: scroll;
height: calc(100vh - 40px);
}
https://jsfiddle.net/8ha45uao/
或者只是增加高度和溢出:自动添加到内容容器:
.asfsadf {
margin-top: 40px;
height: calc(100vh - 40px);
overflow: auto;
}
https://jsfiddle.net/34Lf1mke/3/
如果您关心旧的浏览器,则可以使JavaScript进行后备以计算高度。
您应该将背景色用于宽度为100%的固定div。 并将上边距设置为“ content-mask” div作为固定div的高度。
尝试这个
.asfsadf{
width: 500px;
height: 200px;
overflow-y: scroll;
overflow-x:hidden;
}
为了使用溢出属性滚动容器,必须为容器指定固定的高度和宽度。
在您的情况下,更正的CSS是。
.title {
position: fixed;
top: 0;
}
.menu {
position: fixed;
top: 20px;
border: 1px solid black;
}
.content-mask {
position: fixed;
top: 40px;
left: 0px;
overflow-y: scroll;
max-height: calc( 100% - 40px);
width: calc( 100% );
}
.content {
}
html{
width: 100%;
height: 100%;
}
body {
overflow: hidden;
background-image: url("https://pbs.twimg.com/media/ChtN47lVAAAQWD1.jpg:large");
background-size:cover;
background-position: center center;
height: 100%;
width: 100%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.