使用flex布局水平滚动时，如何使第一行连续显示为粘性? [英] how to make first column in a row sticky when scrolling horizontal using flex layout?

问题描述

在使用flex布局水平滚动时，如何使第一行连续显示为粘性?

how to make first column in a row sticky when scrolling horizontal using flex layout ?

.wrapper {
  display: flex;
  height: 100vh;
  overflow-x: auto
}

.first-column {
  flex: 1 0 300px;
  background: gray;
}

.second-column {
  flex: 0 0 auto;
  padding: 20px;
  overflow: auto;
}

<div class="wrapper">
  <div class="first-column">
    <blockquote><i>Please, make me fixed!</i></blockquote>
  </div>
  <div class="second-column">
    hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are
    u?hello How are u?
  </div>
</div>

这是* ngFor(loop)中的一行.因此，可以有多个类似表格结构的行.我希望第二个div在水平滚动和通常的垂直滚动时出现在第一列的下方滚动

This is a row inside a *ngFor(loop). So there can be multiple such rows like a table structure.I want the second div appear scroll beneath first column when scrolling horizontal and usual vertical scroll

推荐答案

问题非常简单，如您在问题中提到的使用position:sticky Css离开div
参见下面的代码段

Its very simple bro as u mentioned in the question use position:sticky Css to left div
See the snippet below

.wrapper {
  display: flex;
  height: 100vh;
  overflow-x: auto
}

.first-column {
  flex: 1 0 300px;
  background: gray;
  position: sticky;
  left: 0;
}

.second-column {
  flex: 0 0 auto;
  padding: 20px;
  overflow: auto;
}

<div class="wrapper">
  <div class="first-column">
    <blockquote><i>Please, make me fixed!</i></blockquote>
  </div>
  <div class="second-column">
    hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are
    u?hello How are u?
  </div>
</div>

这篇关于使用flex布局水平滚动时，如何使第一行连续显示为粘性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！