javascript - AngularJS + ionic : Label depending on scroll position

Question

我有一个 ion-content 可滚动项目和其中的一些 anchor 以跳转到特定位置。在 ion-content 之外，我有一个按钮可以跳转到下一个位置。例如:

Jump to Position2
**Position1**
Text
Text
Text
Text
**Position2**
Text
Text
Text

快速解决方案是将监听器附加到滚动完成:

<ion-content delegate-handle="scroll1" on-scroll-complete="setTextForScroll()">

然后根据 Controller 中的滚动位置设置标签

 var settingsScroller = $ionicScrollDelegate.$getByHandle('scroll1');
 var posXScroll = settingsScroller.getScrollPosition().top;
 if posXScroll === xy ...

但这是一个快速的解决方法。它不适用于不同的屏幕尺寸或动态变化的模板。

我的下一个想法是做一个属性指令，它将所有以这种方式标记的元素和渲染滚动中的位置添加到一个数组中，并计算当前哪个元素最接近滚动位置。

但是现在我在将渲染的 DOM 元素的位置获取到 Controller 时遇到了问题，并且我想也许我的方法太复杂了:/。

还有想法？非常感谢您的帮助!!听起来有点简单……滚动-> 标签。完成:D

为奥克兰数据库干杯

Answer 1

如果你想定义一个你可以滚动到的 anchor ，只需在你的文档中你想要到达的位置放置这样的东西

<a name="anchor"></a>

你可以通过这种方式到达那个位置:

<a href="#anchor">Go to anchor!</a>