Clever Geek Handbook

AngularJS + Ionic: shortcut based on scroll position

I have a ion-content

scrollable element and some anchors in it to navigate to specific positions. Outside ion-content

, I have a button that suggests moving to the next position. For example:

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

A quick solution was to end the listening before scrolling:

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

And then set the label based on the scroll position in the controller

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

But this is a quick workaround. It won't work on different screen sizes or dynamically changing templates.

My next idea was to make an attribute directive that adds all the elements thus marked and the position in the rendered scroll to the array and calculates which element is closest to the scroll position at the moment.

But now I'm having trouble getting the position of the rendered DOM element to the AND controller I think maybe my approach is tricky: /.

And ideas? Your help would be greatly appreciated! It sounds simple ... Scroll → Label. Completed: D

Cheers AucklandDB

+3


source to share


2 answers


If you want to define an anchor that you can scroll, just put something like this in the document at the position you want to achieve

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


than you can reach this position like this:

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


source


You can do it ionically, check doc

In html:

<ion-content delegate-handle="myPageDelegate">
  <a ng-click="scrollTo('Contact')"></a>

  <div id="Contact">
  //some content goes here
  </div>


Then in 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
  };
});
0


source






More articles:


All Articles