css 使垂直滚动条悬停在视图的可见区域

有没有一种方法可以通过CSS强制一个垂直条停留在我的视图的可见区域？
我正在使用Anvil Works，并在该容器中有一个名为data grid的容器，还有两个容器：data-row-panel - containing my header of the table repeating-panel - containing rows of data.
在实际的代码中，我的竖线位于重复面板的末尾。为了看到垂直条，我需要滚动到年底与水平滚动条。
如何让它悬停在可见区域？在anvil中，很难编辑这个对象的HTML端，因为它们是由anvil代码控制的。

/* Data Grids */
/*styles data-row-panel containing header row to be single row only and add a bar*/
.anvil-role-tonal-data-grid .anvil-data-row-panel {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  min-width: min-content;
  overflow-x: hidden;
}

/*styles repeating panel to be single row only and add a bar*/
.anvil-role-tonal-data-grid .repeating-panel {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow-x: hidden;
  min-width: min-content;
  overflow-y: scroll;/*add vetical bar*/
  max-height: 450px;/*max height*/
}
/*container holding the data row and repeating panel
.anvil-role-tonal-data-grid .data-grid-child-panel {
  overflow-x: auto !important;
}

代码生成类似于html结构的内容：

<div class="data-grid-child-panel">
     <div class="anvil-data-row-panel"></div>
     <div class="repeating-panel"></div>
</div>

HTML结构。其余部分由代码控制。

<div class="structure">
  <div class="app-bar" anvil-drop-container=".anvil-container" anvil-drop-redirect=".placeholder">
    <a class="sidebar-toggle" anvil-if-slot-empty="top-left-btn" anvil-hide-if-slot-empty="left-nav" anvil-drop-slot="top-left-btn" href="javascript:void(0)"><i class="fa fa-bars"></i></a>
    <a class="sidebar-toggle anvil-designer-only" anvil-if-slot-empty="top-left-btn" anvil-if-slot-empty="left-nav" anvil-drop-slot="top-left-btn"><i class="fa fa-blank"></i></a>
    <div class="top-left-btn" anvil-slot="top-left-btn"></div>
    <div class="title" anvil-slot="title">
      <div class="placeholder anvil-designer-only" anvil-if-slot-empty="title" anvil-drop-here>Drop title here</div>
    </div>
    <div class="app-bar-nav" anvil-slot="nav-right">
      <div class="placeholder anvil-designer-only" anvil-if-slot-empty="nav-right" anvil-drop-here>Drop a FlowPanel here</div>
    </div>
    <div style="clear:both"></div>
  </div>

  <div class="nav-holder">
    <div class="left-nav anvil-measure-this" anvil-slot-repeat="left-nav" anvil-drop-container=">.anvil-container">
    </div>
    <div class="left-nav-placeholder anvil-designer-only" anvil-if-slot-empty="left-nav" anvil-drop-slot="left-nav">
      <div class="prompt">To add a sidebar, drop a ColumnPanel here.</div>
    </div>

    <div class="content">
      <div anvil-slot-repeat="default" class="anvil-measure-this"></div>
      <div class="placeholder drop-here" anvil-if-slot-empty="default" anvil-drop-slot="default">Drop a ColumnPanel here.</div>
    </div>
  </div>
  <div class="nav-shield"></div>
</div>
<div anvil-drop-default anvil-drop-redirect=".placeholder" anvil-drop-container=".anvil-container"></div>

我找到了解决问题的办法。也许这不是解决问题的最佳方法，但它确实有效。
在我的父容器中，我有标题行和数据行。向父容器添加垂直滚动和高度限制会导致标题和行一起滚动。所以向下滚动意味着标题消失。谢谢你的位置属性提示。
我只是将标题行放在父容器的顶部，并将它的z索引设置在数据行容器的顶部。两个滚动条都是可见的，因为我的父容器仅限于我的可见区域，它们不会移动。

.anvil-role-tonal-data-grid .anvil-data-row-panel {
  display: flex;
  flex-direction: row;/*all columns are ordered as a single row*/
  flex-wrap: nowrap;
  min-width: min-content;
  overflow-x: hidden;
  position: sticky;/*by setting it it will get stick to the top and it hoovers over the scrolled page as header*/
  top: 0;
  z-index: 1;/*forces to be always at the top to cover the scrolled rows of 2nd container*/
  background-color: #FFFFFF;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.anvil-role-tonal-data-grid .anvil-data-row-panel > div {
  padding: 12px;
  border-bottom: 2px solid #F5F5F5;
}

.anvil-role-tonal-data-grid .anvil-data-row-panel > div:first-child {
  border-radius: 8px 0px 0px 0px;
}

.anvil-role-tonal-data-grid .anvil-data-row-panel > div:last-child {
  border-radius: 0px 8px 0px 0px;
}

/*styles repeating panel to be single row only and add a bar*/
.anvil-role-tonal-data-grid .repeating-panel {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow-x: hidden;
  min-width: min-content;
  position: relative;
  z-index: 0; /* lower z-index than anvil-data-row-panel */
}

.anvil-role-tonal-data-grid .data-grid-child-panel {
  overflow-x: auto !important;
  overflow-y: scroll;/*add vetical bar*/
  max-height: 450px;
}

css 使垂直滚动条悬停在视图的可见区域

1条答案

相关问题

热门标签

最新问答