AngularJS+Ionic:标签取决于滚动位置

AngularJS + Ionic: Label depending on scroll position

本文关键字：滚动 位置 取决于 标签 AngularJS+Ionic      更新时间：2023-09-26

我有一个ion-content可滚动项目，其中有一些锚可以跳到特定位置。在ion-content外面，我有一个按钮，可以跳到下一个位置。例如：

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

快速解决方案是在滚动完成时将侦听器连接到：

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

然后根据控制器中的滚动位置设置标签

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

但这是一个快速的解决方法。它无法在不同的屏幕大小或动态变化的屏幕上工作样板

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

但现在我在将渲染的DOM元素的位置获取到控制器AND时遇到了问题我想也许我的方法是复杂的：/。

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

Cheers AucklandDB

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

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

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

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

你可以用离子的方式来做，检查文档

在html:中

<ion-content delegate-handle="myPageDelegate">
  <a ng-click="scrollTo('Contact')"></a>
  <div id="Contact">
  //some content goes here
  </div>

然后在js:中

myApp.controller('MyCtrl', function ($scope,$ionicScrollDelegate,$location) {
  $scope.scrollTo = function(target){
    $location.hash(target);   //set the location hash
    var handle = $ionicScrollDelegate.$getByHandle('myPageDelegate');
    handle.anchorScroll(true);  // 'true' for animation
  };
});
相关文章：