Ionic 2 中的 $anchorScroll？滚动到具有 ID 的元素答案

【问题标题】：$anchorScroll in Ionic 2? Scroll to element with IDIonic 2 中的 $anchorScroll？滚动到具有 ID 的元素
【发布时间】：2016-12-02 22:37:03
【问题描述】：

从 Angular 1.x 开始，有什么方法可以在 ionic 2/Angular2 中执行 $anchorScroll 吗？

试图滚动到页面上的一个元素。我尝试了类似 ng2-page-scroll https://github.com/Nolanus/ng2-page-scroll

不确定我是否做得对，我按照教程进行操作并得到错误：

ParseError: 'import' and 'export' may appear only with 'sourceType: module'

我认为这不再适用于最新的 ionic 2 版本。只希望有一种更简单的方法，有什么解决方法吗？

【问题讨论】：

标签： cordova angular ionic2 anchor-scroll onepage-scroll

【解决方案1】：

我也遇到了同样的情况，我想在每次单击按钮时滚动到下一页/元素。

我查看了您提到的相同选项，发现在 ion-slides (http://ionicframework.com/docs/v2/api/components/slides/Slides/) 中，您可以将方向设置为“垂直”，这对我有用。

不知道它是否可以帮助您的用例。

否则，您可以查看 Content 和 scrollTo 函数。 http://ionicframework.com/docs/v2/api/components/content/Content/

【讨论】：

然而，我正在使用 *ngFor 处理大量 JSON 信息，使用幻灯片会导致性能问题。但我想你的答案是我们使用 ionic2 最接近的解决方法。 scrollTo 仅在我使用它时才对我有用.

【解决方案2】：

我不知道您是否仍然面临这个问题，但这可以使用YourHTMLelement.getBoundingClientRect() 解决，它返回该元素的边界为上、右、下和左。

这样，您可以使用content 和scrollTo(left, top, duration) 函数。我创建了一个垂直滚动到特定元素的函数，如下所示：

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);
}

但您可以使用 scrollLeft 参数将其更改为水平滚动方式。

【讨论】：

我在el.getBoundingClientRect() 给出不可靠的结果时遇到问题。一个简单的el.offsetTop 对我有用。