如何在ionic2中使用content.scrollTo()进行离子滚动

Question

我尝试滚动到固定位置，例如scrollTo(500,20(。假设您使用的是宽度为 300 像素的设备。滚动目标现在不在屏幕范围内，您必须向右滚动。

我通过执行以下操作解决了这个问题：

<ion-content>
    <ion-scroll scrollX="true" style="width:100%; height:100%; white-space: nowrap; ">
        <div style="width:1000px; ">
            [box1] [box2] [box3] [...]
        </div>
    </ion-scroll>
</ion-content>

到这里为止，一切都很好。例如，如果我想通过按按钮向右跳跃 500 像素，问题就会开始。向右滑动有效。我知道有一个函数可以为<ion-content>执行此操作：

@ViewChild(Content) content: Content;
[...]
this.content.scrollTo(500, 500, 500); 

不幸的是，这在我的情况下不起作用。我认为问题是内容与设备大小有关，因此scrollTo((方法不会影响<ion-scoll>。如何使用 scrollTo(( 方法进行<ion-scroll>而不是<ion-content>？

感谢您的任何帮助！

Answer 1

如何使用 scrollTo(( 方法进行<ion-scroll>而不是 <ion-content> ？

我仍在研究如何对滚动进行动画处理，但至少这可以被视为您的方案的解决方案。请看一下这个笨蛋。

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

元素.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;，我们可以将离子滚动 500px 的内容向右滚动。然后，我们可以通过执行 this.scroll.scrollElement.scrollLeft = 0; 再次回到起点。

Answer 2

通过内容滚动

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

按 ID #scroll

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

上面的方法适用于上下滚动，但在水平/滚动X不起作用的情况下，通过下面的代码，我解决我的解决方案可能希望对您有所帮助。

打字稿

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>

Answer 3

为了补充上面的答案，这将处理平滑滚动。

在.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' });

希望对某人有所帮助。

Answer 4

为什么不先获取要滚动到的元素的尺寸？在 html 文件中为您的离子滚动分配一个 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 的返回值 左、上、右、下、x、y、宽度、高度属性描述边框框(以像素为单位(。宽度和高度以外的属性相对于视区的左上角。

看看你的代码，我认为你不需要离子滚动，你应该能够给你的div分配一个id，并获得你想要的结果。

Answer 5

您可以将this.content.scrollTo(...)替换为this.content._scrollContent.nativeElement.scrollTo(...)