如何在 ionic2 中使用 content.scrollTo() for ion-scroll？

5 回答

• 9

  如何将 scrollTo()方法用于<ion-scroll>而不是<ion-content>？

  我还在研究如何为滚动设置动画，但至少这可以被视为您的场景的解决方案。请看这个 plunker。

  因为我们不能使用ion-content进行滚动，所以我想获取 Scroll 的实例，然后访问内部 html 滚动元素，然后使用element.scrollLeft属性滚动该元素：

  element.scrollLeft 属性获取或设置元素内容向左滚动的像素数。

  所以在组件代码中：

  import { Component, ViewChild } from '@angular/core';
  import { NavController, Content } from 'ionic-angular';
  
  @Component({...})
  export class HomePage {
    @ViewChild('scroll') scroll: any;
  
      constructor() {}
  
      public backToStart(): void {
        this.scroll.scrollElement.scrollLeft = 0;
      }
  
      public scrollToRight(): void {
        this.scroll.scrollElement.scrollLeft = 500;
      }
  
  }
  

  在视图中：

  <ion-content padding>
    <ion-scroll #scroll scrollX="true" style="width:100%; height:150px; white-space: nowrap;">
          <div  style="width:1000px;">
              <div style="display:inline-block;height:100px;width:100px;border:1px solid black;"></div>
              <div style="display:inline-block;height:100px;width:100px;border:1px solid red;"></div>
              <div style="display:inline-block;height:100px;width:100px;border:1px solid blue;"></div>
              <div style="display:inline-block;height:100px;width:100px;border:1px solid green;"></div>
              <div style="display:inline-block;height:100px;width:100px;border:1px solid grey;"></div>
              <div style="display:inline-block;height:100px;width:100px;border:1px solid brown;"></div>
              <div style="display:inline-block;height:100px;width:100px;border:1px solid yellow;"></div>
              <div style="display:inline-block;height:100px;width:100px;border:1px solid orange;"></div>
              <div style="display:inline-block;height:100px;width:100px;border:1px solid pink;"></div>
              <div style="display:inline-block;height:100px;width:100px;border:1px solid violet;"></div>
          </div>
      </ion-scroll>
  
      <button (click)="backToStart()" ion-button text-only>Go to start</button>
      <button (click)="scrollToRight()" ion-button text-only>Scroll to right!</button>
  </ion-content>
  

  通过this.scroll.scrollElement.scrollLeft = 500;，我们可以将 ion-scroll 500px 的内容滚动到右边。然后我们可以通过this.scroll.scrollElement.scrollLeft = 0;再次回到起点。

  回复于 2024-04-26T05:15:31+08:00
• 6

  通过内容滚动

  @ViewChild(Content) content: Content;
    this.content.scrollTo
  

  通过 id #scroll

  @ViewChild('scroll') scroll: any;  
  this.scroll.scrollElement.scrollLeft = 500;
  

  上面的方法适用于顶部底部滚动，但在 horizontal/scrollX 不工作的情况下，通过下面的代码我解决我的解决方案可能希望它会对你有所帮助。

  ****打字稿

  scrollmain(elementId, index) {
     console.info('elementId', elementId)
     var el = document.getElementById(elementId);
     el.scrollIntoView({ behavior: "smooth" });
  }
  

  **** HTML

  <ion-scroll #scroll scrollX="true" style="width:100%;white-space: 
            nowrap; height: 60px">
      <ion-segment *ngIf="mcqdata" color="appmaincolor">
          <ion-segment-button *ngFor="let mcq of mcqdata; let i=index;" [id]="mcq.ques_id" value="{{mcq.ques_id}}" (ionSelect)="scrollmain(mcq.ques_id,i)"
              [ngClass]="{'active': selectedIdx == i}">
              <strong>Queastion{{i+1}}</strong>
          </ion-segment-button>
      </ion-segment>
  </ion-scroll>
  

  回复于 2024-04-26T05:15:31+08:00
• 2

  要添加上面的答案，这将处理平滑滚动。

  在.html 中命名滚动元素

  <ion-scroll #scroll>
  

  导入滚动。

  import { Scroll } from 'ionic-angular';
  

  引用.ts 中的滚动条

  @ViewChild('scroll') scroll: any;
  

  在需要的地方添加此代码：

  this.scroll._scrollContent.nativeElement.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
  

  希望能帮到别人。

  回复于 2024-04-26T05:15:31+08:00
• 0

  为什么不首先获得要滚动的元素的尺寸？在 html 文件中为 ion-scroll 分配一个 id，然后你可以使用此功能：

  scrollToElement(id) { 
      var el = document.getElementById(id);
      var rect = el.getBoundingClientRect();
      // scrollLeft as 0px, scrollTop as "topBound"px, move in 800 milliseconds
      this.content.scrollTo(0, rect.top, 800);
  }
  

  从这个文件开始：getBoundingClientRect 的返回值 left，top，right，bottom，x，y，width，height 属性描述 border-box(以像素为单位)。宽度和高度以外的属性相对于视口的 top-left。

  看看你的代码，我认为你不需要 ion-scroll，你应该能够只为你的 div 分配一个 id 并得到你想要的结果。

  回复于 2024-04-26T05:15:31+08:00
• 0

  你可以用this.content._scrollContent.nativeElement.scrollTo(...)替换this.content.scrollTo(...)

  回复于 2024-04-26T05:15:31+08:00