Question

我创建滚动到一个元素，为此我尝试了：

＆＃13;

 .scroll-content {
    overflow: hidden;
 }
    
.scrollabe {
  overflow-y: scroll;
}

＆＃13;

<ion-content>
  <ion-grid style="height:100%" *ngIf="plat && ticket">
    <ion-row>
      <ion-col col-4 padding>
        <ticket-info [ticket]="ticket"></ticket-info>        
      </ion-col>
      <ion-col class="scrollabe" col-8 no-margin>
          <ticket-acao [ticket]="ticket"></ticket-acao>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

＆＃13;

但这隐藏了我的内容： My element

另外，我试过这种方式：

＆＃13;

.scroll-content {
  overflow: hidden;
}

＆＃13;

 <ion-content>
  <ion-grid *ngIf="plat && ticket">
    <ion-row>
      <ion-col col-4 padding>
        <ticket-info [ticket]="ticket"></ticket-info>        
      </ion-col>
      <ion-col col-8 no-margin>
        <ion-scroll scrollY="true" style="height: 100%;width: 100%">
          <ticket-acao [ticket]="ticket"></ticket-acao>
        </ion-scroll>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

＆＃13;

并出现同样的问题......

如果我降低高度，问题就解决了，但我失去了响应式布局。

那么，最好的方法是什么？

Answer 1

删除style="height: 100%"以及您在那里声明的两个CSS规则。如果ion-content溢出，ion-grid组件将为您执行滚动。

滚动到元素的最佳方法

1 个答案: