Angular 如何在ionic2中使用content.scrollTo（）进行ion scroll？

我尝试滚动到一个固定的位置，例如滚动到（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>

不幸的是，这在我的情况下不起作用。我认为问题在于内容与设备大小有关，因此scrollTo（）方法对

不起作用。如何将scrollTo（）方法用于

而不是

---

谢谢你的帮助

为什么不先获取要滚动到的元素的维度？在html文件中为您的ion scroll分配一个id，然后您可以：

发件人： getBoundingClientRect left、top、right、bottom、x、y、width、height属性的返回值，以像素为单位描述边框。宽度和高度以外的特性相对于视口的左上角

看看你的代码，我认为你不需要ion scroll，你应该可以给你的div分配一个id，然后得到你想要的结果

如何将scrollTo（）方法用于

而不是

我仍在研究如何制作卷轴动画，但至少这可以作为您场景的解决方案。请看一看

由于我们不能使用

离子内容

进行滚动，因此我考虑获取滚动实例，然后访问内部html滚动元素，然后使用属性在该元素上滚动：

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

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

按id滚动

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

TypeScript

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>


Queastion{{i+1}}
要添加到上述答案中，这将处理平滑滚动

在.html中命名滚动元素

<ion-scroll #scroll>

在.ts中引用滚动条

@ViewChild('scroll') scroll: any;

在需要时添加此代码：

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

希望对某人有所帮助。
您可以将
此.content.scrollTo（…）
替换为
此.content.\u scrollContent.nativeElement.scrollTo（…）
不确定这是否是原因。。但是，
ion scroll
通常需要特定的尺寸<代码>%
通常不起作用在我的情况下，它工作得很好。我可以向右滚动，有一个滚动条，显示可滚动的区域可能是1000px宽。我的问题是，ion内容适合屏幕尺寸，ion scroll对content.scrollTo（）没有反应，因为内容的宽度为300像素，ion scroll的宽度为1000px.hi。谢谢你的回答。我的问题不在于找到要滚动到的元素的正确位置。我可以写这个.content.scrollTo（500,0800）；直接但什么也没发生。我的问题是，ion内容适合屏幕尺寸，ion scroll对content.scrollTo（）没有反应，因为内容的宽度为300像素，ion scroll的宽度为1000px。如果我删除离子滚动，我无法向右滚动。我尝试了很多让内容滚动。但不幸的是，一切都不起作用：（你知道为什么当你删除ion scroll时它不起作用吗？在这种情况下你能手动滚动吗？不，我不能。我找到的每个解决方案都使用ion scroll。ion内容的主要问题是我不能向右滚动。我认为ion内容不是为此而设计的。非常好的回答，谢谢！不幸的是，我收到一条错误消息：“无法设置未定义的属性'scrollLeft'。如果我写入console.log（this.scroll）我明白了：_scrollContent:ElementRef，nativeElement:div.scroll-content。你有解决方案吗？嗯，也许我们使用的是不同版本的Ionic。而不是
this.scroll.scrollElement.scrollLeft=500；
试试
this.scroll.nativeElement.scrollLeft=500；
我找到了，就是这个.scroll。_scrollContent.nativeElement.scrollLeft！非常感谢！！很高兴听到这个消息！：）回答得很好！我创建了一个动画，可以在不使用任何js库的情况下平滑滚动
<ion-scroll #scroll>

import { Scroll } from 'ionic-angular';

@ViewChild('scroll') scroll: any;

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