typescript 如何在 ionic2 中使用 content.scrollTo() 进行离子滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44099796/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I use content.scrollTo() for ion-scroll in ionic2?
提问by Tobias Bambullis
I try to scroll to a fixed position, for example scrollTo(500, 20). Let's say that you are on a device, which has got a width of 300 pixel. The scroll target is now out of the screen scope, you have to scroll to the right.
我尝试滚动到固定位置，例如 scrollTo(500, 20)。假设您在一个宽度为 300 像素的设备上。滚动目标现在超出了屏幕范围，您必须向右滚动。
I solved this by doing the following:
我通过执行以下操作解决了这个问题：
<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>
Up to here everything is fine. The problem starts if i want to jump 500 pixel to the right by pressing a button for example. Swiping to the right works. I know that there is a function to do this for <ion-content>:
到这里一切都很好。例如，如果我想通过按下按钮向右跳 500 像素，问题就开始了。滑动到正确的作品。我知道有一个功能可以为<ion-content>：
@ViewChild(Content) content: Content;
[...]
this.content.scrollTo(500, 500, 500);
This unfortunately doesn't work in my case. I think the problem is that the content is related to the device size so the scrollTo() method does not take affect for <ion-scoll>. How can I use the scrollTo() method for <ion-scroll>instead of <ion-content>?
不幸的是，这在我的情况下不起作用。我认为问题在于内容与设备大小有关，因此 scrollTo() 方法对<ion-scoll>. 如何使用 scrollTo() 方法<ion-scroll>代替<ion-content>？
Thanks for any help!
谢谢你的帮助！
采纳答案by sebaferreras
How can I use the scrollTo() method for
<ion-scroll>instead of<ion-content>?
如何使用 scrollTo() 方法
<ion-scroll>代替<ion-content>？
I'm still working on how to animate the scroll, but at least this may be considered as a solution for your scenario. Please take a look at this plunker.
我仍在研究如何为滚动设置动画，但至少这可以被视为您的场景的解决方案。请看看这个 plunker。
Since we can't use theion-contentfor scrolling, I though about getting the instance of the Scroll, then accessing the inner html scroll element, and then using the element.scrollLeftproperty to scroll on that element:
由于我们不能使用ion-contentfor 滚动，我想获取 Scroll 的实例，然后访问内部的 html 滚动元素，然后使用element.scrollLeft属性在该元素上滚动：
The element.scrollLeft property gets or sets the number of pixels that an element's content is scrolled to the left.
element.scrollLeft 属性获取或设置元素内容向左滚动的像素数。
So in the component code:
所以在组件代码中：
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;
}
}
And in the view:
在视图中：
<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>
By doing this.scroll.scrollElement.scrollLeft = 500;, we can scroll the content of the ion-scroll 500px to the right. We can then go back to the start again by doing this.scroll.scrollElement.scrollLeft = 0;.
通过这样做this.scroll.scrollElement.scrollLeft = 500;，我们可以将 ion-scroll 的内容向右滚动 500px。然后我们可以通过执行 重新回到起点this.scroll.scrollElement.scrollLeft = 0;。
回答by Manoj Bhardwaj
By content scrolling
通过内容滚动
@ViewChild(Content) content: Content;
this.content.scrollTo
By id #scroll
通过 id #scroll
@ViewChild('scroll') scroll: any;
this.scroll.scrollElement.scrollLeft = 500;
This above method is working fine for top bottom scrolling but in the case of horizontal/scrollX not working so by below code i resolve my solution may hope it will helpful for you.
上述方法适用于上下滚动，但在水平/scrollX 不起作用的情况下，通过下面的代码，我解决了我的解决方案，希望它对您有所帮助。
TypeScript
打字稿
scrollmain(elementId, index) {
console.info('elementId', elementId)
var el = document.getElementById(elementId);
el.scrollIntoView({ behavior: "smooth" });
}
HTML
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>
回答by Blueberry
To add to the answers above, this will handle smooth scrolling.
要添加到上面的答案，这将处理平滑滚动。
Name the scroll element in your .html
在 .html 中命名滚动元素
<ion-scroll #scroll>
Import the scroll.
导入卷轴。
import { Scroll } from 'ionic-angular';
Reference the scroller in the .ts
在 .ts 中引用滚动条
@ViewChild('scroll') scroll: any;
Add this code where its needed:
在需要的地方添加此代码：
this.scroll._scrollContent.nativeElement.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
Hope that helps somebody.
希望对某人有所帮助。
回答by Muhammad Shahzad Anjum
You can replace this.content.scrollTo(...)with this.content._scrollContent.nativeElement.scrollTo(...)
您可以替换this.content.scrollTo(...)为this.content._scrollContent.nativeElement.scrollTo(...)
回答by Ari
Why don't you get the dimensions of the element that you want to scroll to first? Assign an id to your ion-scroll in html file, then you can use this function:
为什么不获取要首先滚动到的元素的尺寸？在 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);
}
From this documentation: The returned value of getBoundingClientRect left, top, right, bottom, x, y, width, height properties describing the border-box in pixels. Properties other than width and height are relative to the top-left of the viewport.
来自本文档： getBoundingClientRect left, top, right, bottom, x, y, width, height 属性的返回值以像素为单位描述边框。宽度和高度以外的属性相对于视口的左上角。
Looking at your code, I don't think you need ion-scroll, you should be able to just assign an id to your div and get the result you want.
看看你的代码，我认为你不需要离子滚动，你应该能够为你的 div 分配一个 id 并获得你想要的结果。
