如何在多个div上设置滚动条,但不是所有div

问题描述 投票:0回答:1

狙击手在哪里?

我想仅在身体部位设置滚动条。不是 rheader 和 cheader。

如果我设置

overflow: scroll;
对于 body div,每个 body div 上有单独的滚动条。 这不是我想要的。 一个滚动条覆盖整个 body div。


rheader 和 cheader 始终处于同一位置。

如果我设置

position: sticky;
到 cheader 和 rheader div, 这几乎就是我想要的 但滚动条必须仅位于 body div 上。 不在 rheader 和 cheader 上

参见片段。

<div>
  <div>
    .
  </div>
  <div class="cheader">
    cheader
  </div>
  <div class="cheader">
    cheader
  </div>
  <div class="rheader">
    rheader
  </div>
  <div class="body">
    body
  </div>
  <div class="body">
    body
  </div>
  <div class="rheader">
    rheader
  </div>
  <div class="body">
    body
  </div>
  <div class="body">
    body
  </div>
</div>
body > div {
  display: grid;
  grid-template:
    ". cheader cheader " 3rem
    "rheader body body " 3rem
    "rheader body body " 3rem
    / 10rem 1fr 1fr;
  width: 500px;
  height: 30px;
}

body > div div {
  border: 1px solid;
}

.body {
  overflow: scroll;
}

this is wrong scrollbar image

scrollbars on whole div with position sticky.  this works, but i do not want scrollbars on cheader and rheader

this is right image of body scrollbar

请注意滚动条不在 rheader 和 cheader 上。

html css css-grid
1个回答
0
投票

我想你可以尝试这个链接,通过冻结第一行和第一列。 dilip_kumar提供的解决方案符合您的需求。

© www.soinside.com 2019 - 2024. All rights reserved.