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

Question

从 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 版本。只希望有更简单的方法，有解决办法吗？

Answer 1

我遇到了同样的情况，每次单击按钮我都想滚动到下一个 page/element。

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

不知道它是否对您的用例有帮助。

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

Answer 2

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

这样，您就可以使用 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 参数将其更改为您希望水平滚动的方式。

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

$anchorScroll in Ionic 2? Scroll to element with ID

cordova

angular

ionic2

anchor-scroll

onepage-scroll