html - 容器内的垂直滚动 div

标签 html css

请看图片:

enter image description here

我想得到这个结果:

enter image description here

我有一个 .row，它有许多可垂直滚动的列元素。问题是头部元素 (.ion-content > .scroll-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/

你有没有遇到类似的问题，能帮帮我吗？

最佳答案

如果您更改 .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>

关于html - 容器内的垂直滚动 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46049842/

上一篇：html - 如何在 html 中自定义 onmouseover 属性？

下一篇：javascript - 如何根据时间更改边框颜色

相关文章：

html - CSS 中的水平选项卡式菜单，无法使事件选项卡的边框重叠处于非事件状态

php - 从 PHP 中的 HTML 更改 CSS

css - 如何让两个 div 标签与 CSS 水平对齐？

css - Wordpress 小部件区域背景色

css - 为什么我的标题和导航位于我的主图下方？

javascript - 动态内容bxslider幻灯片刷新高度

html - 我的旁边不会转到该部分的右侧

javascript - 使用一个选择来确定表单上的哪些其他选择可见

android - 强制刷新 CSS 文件

javascript - 如何在 IE 9 中使用 JavaScript 从样式属性获取背景颜色作为十六进制值？

©2024 IT工具网  联系我们