Question

我不想向上滚动内容，但它永远不会在菜单后面显示出来。这很难，因为它是透明的。所以我使用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");
}

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/

或者只是添加高度和溢出：auto到内容容器：

.asfsadf {
  margin-top: 40px;
  height: calc(100vh - 40px);
  overflow: auto;
}

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

如果您关心旧版浏览器，可以使用javascript后备来计算高度。

Answer 2

您应该使用100％宽度的固定div的背景颜色。并将top-margin设置为＆＃34; content-mask＆＃34; div作为固定div的高度。

Answer 3

试试这个

.asfsadf{
width: 500px;
height: 200px;
overflow-y: scroll;
overflow-x:hidden;
}

Answer 4

对于使用overflow property滚动容器，必须为容器指定固定的高度和宽度。

现场演示：
https://jsfiddle.net/0t8oh85y/

你的案例中纠正的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%;
}

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

4 个答案: