如何在离子中停止列滚动

Question

我正在处理一个有两列的屏幕，一列用于选择类别，另一列是根据类别显示项目，基本上是一个过滤选项屏幕。我有两列，类别列有 3 个选项 cat 1、cat 2 和 cat 3，另一列的列表更大，可以滚动，不同类别的不同列表。但我无法这样做。当我在这个屏幕上滚动时，整个屏幕也在滚动类别列。我想停止滚动类别列，并且项目列可以滚动。怎么做？我的代码在下面...

<ion-content>

    <ion-row>
  <ion-col >

    <ion-item>
      cat1
    </ion-item>
    <ion-item>
      cat2
    </ion-item>
    <ion-item>
      cat3
    </ion-item>
  </ion-col>

  <ion-col class="home-container">

      <ion-list>
          <ion-item padding text-wrap *ngFor="let d of data">
              <ion-label>
                   {{ d.title }} 
              </ion-label>
              <ion-checkbox color="royal" checked="false"></ion-checkbox>
          </ion-item>
      </ion-list>

  </ion-col>
</ion-row>

</ion-content> 

css

page-teacher-filter {
    .home-container {
        overflow:auto;
        height: 100%;
   }
}

Answer 1

你需要一个固定的高度

section{
  background:red;
  padding: 15px;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.cat_1, .cat_2{
  float: left;
  padding: 20px;
}
.cat_1{background: silver;}
.cat_2{
  background: white;
  height: 300px;
  overflow: auto;
}

<section>
  <div class="cat_1">
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
  </div>

  <div class="cat_2">
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
  </div>
</section>