容器内垂直可滚动div

Question

请看一下这张照片：

​

​

我想得到这样的结果：

​

​

我有一个.row，它有许多垂直滚动的列元素。问题是head元素(..ion content>.涡旋内容)扩展了滚动条。如何使head元素中的滚动条活动但不滚动？(第二个屏幕)。

我的代码：

header.nav {
    left: 0;
    top: 0;
    position: absolute;
    z-index: 10;
    display: block;
    width: 100%;
    background-color: red;
}
header.nav .toolbar {
    padding: 0px;
    min-height: 56px;
}
.tabs {
    left: 0;
    top: 0;
    position: absolute;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.tabs .tabbar {
    left: 0;
    bottom: 0;
    background-color: #132843;
    opacity: 1;
    position: absolute;
    z-index: 10;
    display: flex;
    width: 100%;
}
.tabs .tabbar a.button {
    min-height: 56px;
    font-weight: normal;
    color: rgba(123, 122, 122, 0.7);
    padding: 0;
}
.tabs .tabpanel {
    left: 0;
    top: 0;
    position: absolute;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    contain: strict;
    overflow: hidden;
}
.gallery-page.ion-page {
    left: 0;
    top: 0;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}
.ion-content {
    left: 0;
    top: 0;
    position: absolute;
    color: #212121;
    background-color: gray;
    display: block;
    width: 100%;
    height: 100%;
    contain: layout size style;
}
.ion-content > .fixed-content {
    margin-top: 56px;
    margin-bottom: 56px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    display: block;
}
.ion-content > .scroll-content {
    margin-top: 56px;
    margin-bottom: 56px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
    display: block;
    overflow-x: hidden;
    overflow-y: scroll;
    will-change: scroll-position;
    contain: size style layout;
}
.grid {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}
.grid .row {
    display: flex;
    flex-wrap: wrap;
}
.grid .row .col {
    padding: 5px;
    position: relative;
    width: 100%;
    margin: 0;
    min-height: 1px;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}
.grid .row .col .scrolly {
    width: 100%;
    height: 100vh;
    position: relative;
    display: block;
}
.grid .row .col .scrolly .scroll-content {
    overflow-y: auto;
    overflow-x: hidden;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    will-change: scroll-position;
}

<div class="page">
  <header class="nav">
    <div class="toolbar"></div>
  </header>
  <div class="tabs">
    <div class="tabbar"><a class="button"></a></div>
    <div class="tabpanel">
      <div class="gallery-page ion-page">
        <div class="ion-content">
          <div class="fixed-content"></div>
          <div class="scroll-content">
            <div class="grid">
              <div class="row">
                <div class="col">
                  <div class="scrolly">
                     <div class="scroll-content">
                       <p>
                       (I) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et nunc eget lorem vestibulum mollis. Sed condimentum viverra finibus. Vivamus id ex fermentum, pulvinar elit at, pretium eros. Suspendisse nec rhoncus tellus. Vivamus vitae aliquet tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis eget dolor quis diam sagittis eleifend. Quisque faucibus, quam non auctor ultricies, mauris magna mollis sapien, at hendrerit lacus leo a diam. Praesent at tellus facilisis, dignissim lectus id, fermentum tellus. Pellentesque venenatis, diam nec molestie fringilla, turpis libero gravida nisi, sit amet rutrum sem nisl in odio. Donec ac hendrerit neque. Nam dignissim ex massa, id varius purus tempus a. Nam eu sem ut quam porttitor aliquam.

Sed efficitur tincidunt egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eleifend, leo rhoncus placerat maximus, eros ex fermentum lacus, efficitur lacinia orci neque ac purus. Integer elit nulla, ornare ut vulputate vitae, lacinia et odio. Proin vel vestibulum lorem. Integer suscipit nibh dolor, sed dictum velit malesuada nec. Nullam nec laoreet magna. Mauris tempus, mi ut placerat commodo, sem massa faucibus enim, quis varius nibh purus non nulla. Mauris in metus et nisl blandit pharetra.
                       </p>
                     </div>
                  </div>
                </div>
                <div class="col">
                  <div class="scrolly">
                     <div class="scroll-content">
                       <p>
                       (II) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et nunc eget lorem vestibulum mollis. Sed condimentum viverra finibus. Vivamus id ex fermentum, pulvinar elit at, pretium eros. Suspendisse nec rhoncus tellus. Vivamus vitae aliquet tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis eget dolor quis diam sagittis eleifend. Quisque faucibus, quam non auctor ultricies, mauris magna mollis sapien, at hendrerit lacus leo a diam. Praesent at tellus facilisis, dignissim lectus id, fermentum tellus. Pellentesque venenatis, diam nec molestie fringilla, turpis libero gravida nisi, sit amet rutrum sem nisl in odio. Donec ac hendrerit neque. Nam dignissim ex massa, id varius purus tempus a. Nam eu sem ut quam porttitor aliquam.

Sed efficitur tincidunt egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eleifend, leo rhoncus placerat maximus, eros ex fermentum lacus, efficitur lacinia orci neque ac purus. Integer elit nulla, ornare ut vulputate vitae, lacinia et odio. Proin vel vestibulum lorem. Integer suscipit nibh dolor, sed dictum velit malesuada nec. Nullam nec laoreet magna. Mauris tempus, mi ut placerat commodo, sem massa faucibus enim, quis varius nibh purus non nulla. Mauris in metus et nisl blandit pharetra.
                       </p>
                     </div>
                  </div>
                </div>
              </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

​

JS Fiddle：https://jsfiddle.net/s4yLywqj/

你有类似的问题吗?你能帮我吗？

Answer 1

如果将.scrolly类更改为使用计算的CSS高度，则可以获得所需的输出。

​

header.nav {
    left: 0;
    top: 0;
    position: absolute;
    z-index: 10;
    display: block;
    width: 100%;
    background-color: red;
}
header.nav .toolbar {
    padding: 0px;
    min-height: 56px;
}
.tabs {
    left: 0;
    top: 0;
    position: absolute;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.tabs .tabbar {
    left: 0;
    bottom: 0;
    background-color: #132843;
    opacity: 1;
    position: absolute;
    z-index: 10;
    display: flex;
    width: 100%;
}
.tabs .tabbar a.button {
    min-height: 56px;
    font-weight: normal;
    color: rgba(123, 122, 122, 0.7);
    padding: 0;
}
.tabs .tabpanel {
    left: 0;
    top: 0;
    position: absolute;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    contain: strict;
    overflow: hidden;
}
.gallery-page.ion-page {
    left: 0;
    top: 0;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}
.ion-content {
    left: 0;
    top: 0;
    position: absolute;
    color: #212121;
    background-color: gray;
    display: block;
    width: 100%;
    height: 100%;
    contain: layout size style;
}
.ion-content > .fixed-content {
    margin-top: 56px;
    margin-bottom: 56px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    display: block;
}
.ion-content > .scroll-content {
    margin-top: 56px;
    margin-bottom: 56px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
    display: block;
    overflow-x: hidden;
    overflow-y: scroll;
    will-change: scroll-position;
    contain: size style layout;
}
.grid {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}
.grid .row {
    display: flex;
    flex-wrap: wrap;
}
.grid .row .col {
    padding: 5px;
    position: relative;
    width: 100%;
    margin: 0;
    min-height: 1px;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}
.grid .row .col .scrolly {
    width: 100%;
    position: relative;
    display: block;
    height: calc(100vh - 122px);
}
.grid .row .col .scrolly .scroll-content {
    overflow-y: auto;
    overflow-x: hidden;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    will-change: scroll-position;
}

<div class="page">
  <header class="nav">
    <div class="toolbar"></div>
  </header>
  <div class="tabs">
    <div class="tabbar"><a class="button"></a></div>
    <div class="tabpanel">
      <div class="gallery-page ion-page">
        <div class="ion-content">
          <div class="fixed-content"></div>
          <div class="scroll-content">
            <div class="grid">
              <div class="row">
                <div class="col">
                  <div class="scrolly">
                     <div class="scroll-content">
                       <p>
                       (I) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et nunc eget lorem vestibulum mollis. Sed condimentum viverra finibus. Vivamus id ex fermentum, pulvinar elit at, pretium eros. Suspendisse nec rhoncus tellus. Vivamus vitae aliquet tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis eget dolor quis diam sagittis eleifend. Quisque faucibus, quam non auctor ultricies, mauris magna mollis sapien, at hendrerit lacus leo a diam. Praesent at tellus facilisis, dignissim lectus id, fermentum tellus. Pellentesque venenatis, diam nec molestie fringilla, turpis libero gravida nisi, sit amet rutrum sem nisl in odio. Donec ac hendrerit neque. Nam dignissim ex massa, id varius purus tempus a. Nam eu sem ut quam porttitor aliquam.

Sed efficitur tincidunt egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eleifend, leo rhoncus placerat maximus, eros ex fermentum lacus, efficitur lacinia orci neque ac purus. Integer elit nulla, ornare ut vulputate vitae, lacinia et odio. Proin vel vestibulum lorem. Integer suscipit nibh dolor, sed dictum velit malesuada nec. Nullam nec laoreet magna. Mauris tempus, mi ut placerat commodo, sem massa faucibus enim, quis varius nibh purus non nulla. Mauris in metus et nisl blandit pharetra.
                       </p>
                     </div>
                  </div>
                </div>
                <div class="col">
                  <div class="scrolly">
                     <div class="scroll-content">
                       <p>
                       (II) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et nunc eget lorem vestibulum mollis. Sed condimentum viverra finibus. Vivamus id ex fermentum, pulvinar elit at, pretium eros. Suspendisse nec rhoncus tellus. Vivamus vitae aliquet tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis eget dolor quis diam sagittis eleifend. Quisque faucibus, quam non auctor ultricies, mauris magna mollis sapien, at hendrerit lacus leo a diam. Praesent at tellus facilisis, dignissim lectus id, fermentum tellus. Pellentesque venenatis, diam nec molestie fringilla, turpis libero gravida nisi, sit amet rutrum sem nisl in odio. Donec ac hendrerit neque. Nam dignissim ex massa, id varius purus tempus a. Nam eu sem ut quam porttitor aliquam.

Sed efficitur tincidunt egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eleifend, leo rhoncus placerat maximus, eros ex fermentum lacus, efficitur lacinia orci neque ac purus. Integer elit nulla, ornare ut vulputate vitae, lacinia et odio. Proin vel vestibulum lorem. Integer suscipit nibh dolor, sed dictum velit malesuada nec. Nullam nec laoreet magna. Mauris tempus, mi ut placerat commodo, sem massa faucibus enim, quis varius nibh purus non nulla. Mauris in metus et nisl blandit pharetra.
                       </p>
                     </div>
                  </div>
                </div>
              </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

​