我不希望内容向上滚动,但它永远不应该在菜单后面可见。 这很难,因为它是透明的。所以我用一个 div 把它当作 mask 。 但出于某种原因,我的内容无法滚动。
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/
或者只是添加 height 和 overflow: auto 到内容容器:
.asfsadf {
margin-top: 40px;
height: calc(100vh - 40px);
overflow: auto;
}
https://jsfiddle.net/34Lf1mke/3/
如果你关心旧浏览器,你可以让 javascript fallback 来计算高度。
关于html - 内容显示滚动条但不可滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37087247/