html - 内容显示滚动条但不可滚动

Question

我不希望内容向上滚动，但它永远不应该在菜单后面可见。这很难，因为它是透明的。所以我用一个 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");
}

https://jsfiddle.net/clankill3r/34Lf1mke/

Answer 1

为 .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 来计算高度。