Question

从Angular 1.x开始，以离子2 / Angular2的形式进行$ anchorScroll吗？

尝试滚动到页面上的元素。我试过像ng2-page-scroll这样的东西 https://github.com/Nolanus/ng2-page-scroll

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

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

我认为这不再适用于最新的离子2释放。只希望有一种更简单的方法，任何解决方法？

Answer 1

我不知道你是否仍然面临这个问题，但这可以使用YourHTMLelement.getBoundingClientRect()来解决，它将该元素的边界返回为top，right，bottom和left。

有了它，您可以使用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参数以水平滚动的方式更改它。

Answer 2

我处于相同的情况，我想在每次点击按钮时滚动到下一页/元素。

我查看了你提到的相同选项，我发现在离子滑片（http://ionicframework.com/docs/v2/api/components/slides/Slides/）中，你可以将方向设置为“垂直”，这对我来说很有用。

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

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

$ anchorScroll in Ionic 2？滚动到带ID的元素

2 个答案: