CSS 网格布局 - 仅针对部分内容的水平和垂直滚动

Posted 2023-03-06

【中文标题】CSS 网格布局 - 仅针对部分内容的水平和垂直滚动

【英文标题】：CSS Grid Layout- horizontal and vertical scrolling only for part of the content

【发布时间】：2021-08-04 23:46:04

【问题描述】：

我正在尝试创建一个布局，其中左侧有标签，顶部有标题，应该始终处于固定位置。在右边我有一些输入元素。如果输入元素溢出，则应该只有输入元素的水平和垂直滚动条（左侧标签和标题应保持不变）。出于其他一些原因，我只想使用带有 CSS 网格的解决方案。我试图让标题和左标签元素具有粘性，它有点工作，但我觉得有更优雅的解决方案。我在每个元素上显式设置了 grid-column 和 grid-row，然后将我的内容部分（我希望它是可滚动的）包装在一个跨越多行和多列的 div 中。现在，我怎样才能使这部分可滚动？我尝试在父/子元素上设置显式宽度/高度，我尝试过溢出：自动但没有任何效果。

html

<div class="root">
<div class="header">
Header
</div>

<label class="l1">leg1</label>
<label class="l2">leg2</label>

<label class="label1">Label1</label>
<label class="label11">Label11</label>
<label class="label2">Label2</label>

<div class="content">
<input class="input1" value="test1"/>
<input class="input2" value="test2"/>
<input class="input3" value="test3"/>
</div>


</div>

CSS

.root
  display:grid;
  grid-template-columns: max-content max-content max-content;


.header
  grid-column: 1 / span 3;
  background: blue;


div input
  height:50px;




.content
  grid-column: 3;
  grid-row: 2 / span 3;
  display: grid;


.l1
  grid-column: 1;
  grid-row: 2 / span 2;
  background: yellow;

.l2
  grid-column: 1;
  grid-row: 4;
  background: green;


.label1
  grid-column: 2;
  grid-row: 2;
  background: teal;


.label11
  grid-column: 2;
  grid-row: 3;
  background: pink;


.label2
  grid-column: 2;
  grid-row: 4;
  background: red;


.input1
 

.input2
 

小提琴：

https://jsfiddle.net/kzu0gf4x/3/ -test1/test2/test3 在溢出时应该是可滚动的，所以如果我向下滚动我应该会看到标题，滚动条应该只在 div 上 class="content"

【问题讨论】：

你看到我的解决方案了吗？

【参考方案1】：

这有帮助吗？

/* Scrollbar Customization */

.root .body::-webkit-scrollbar 
  width: 10px;


.root .body::-webkit-scrollbar-track 
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);


.root .body::-webkit-scrollbar-thumb 
  background-color: darkgrey;
  outline: 1px solid slategrey;



/* Scrollbar Customization */

.root 
  display: grid;
  grid-template-columns: max-content max-content max-content;
  border: 1px solid;
  width: fit-content;


.header 
  grid-column: 1 / span 3;
  background: blue;


.root .body 
  display: grid;
  max-height: 130px;
  overflow-y: scroll;
  /* Give overflow-y: scroll to show always Vertical scrollbar */
  overflow-x: auto;
  grid-template-areas: "label b" "label b" "label b";


.labels 
  display: grid;
  grid-area: label;


.content 
  grid-column: 3;
  grid-row: 2 / span 3;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  max-width: 220px;
  overflow: auto;
  grid-area: b;
  height: fit-content;


.content .row 
  display: grid;
  width: 100%;
  grid-auto-flow: column;


div input 
  margin: 0;
  border: 1px solid rgb(218, 218, 218);
  outline: 0;
  padding: 21px 10px;


.l1 
  grid-column: 1;
  grid-row: 1 / span 3;
  background: yellow;


.l2 
  grid-column: 1;
  grid-row: 3;
  background: green;


.label1 
  grid-column: 2;
  grid-row: 1;
  background: teal;


.label11 
  grid-column: 2;
  grid-row: 2;
  background: pink;


.label2 
  grid-column: 2;
  grid-row: 3;
  background: red;

<div class="root">
  <div class="header">
    Header
  </div>

  <div class="body">
    <div class="labels">

      <label class="l1">leg1</label>
      <label class="l2">leg2</label>

      <label class="label1">Label1</label>
      <label class="label11">Label11</label>
      <label class="label2">Label2</label>
    </div>
    <div class="content">
      <div class="row">
        <input class="input1" value="test1">
        <input class="input2" value="test2">
        <input class="input3" value="test3">
      </div>
      <div class="row">
        <input class="input1" value="test1.1">
        <input class="input2" value="test2.1">
        <input class="input3" value="test3.1">
      </div>
      <div class="row">
        <input class="input1" value="test1.2">
        <input class="input2" value="test2.2">
        <input class="input3" value="test3.2">
      </div>
    </div>

  </div>
</div>

【讨论】：

快到了，是否有可能让水平滚动始终可见？

我们当然可以

需要改变什么？它现在在向下滚动之前是不可见的