Displaying a label in AngularJS and Ionic based on the current scroll position

Question

Displaying a label in AngularJS and Ionic based on the current scroll position

I am facing a challenge with an ion-content scrollable item that contains anchors to jump to specific positions. In addition to the ion-content, there is also a button outside that allows users to jump to the next position. Here's an example:

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

A quick solution was to add a listener for on-scroll completion:

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

By setting the label depending on the scroll position in the controller.

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

However, this workaround may not be effective for different screen sizes or dynamically changing templates.

My idea now is to create an attribute directive that identifies marked elements and their positions in the scroll, then calculates the closest element to the current scroll position.

Despite my efforts, I am struggling to retrieve the DOM Element position in the controller and wonder if my approach is too complicated :/.

Any suggestions? Your assistance would be greatly appreciated! It seems like it should be simple... Scroll -> Label. Done :D

Cheers AucklandDB

javascript angularjs scroll ionic-framework

Answer 1

Answer №1

To create a scrollable anchor in your document, insert the following code at the desired location:

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

You can then navigate to that specific position by using this link:

<a href="#scroll-anchor">Scroll to anchor!</a>

Answer 2

To create a scrollable anchor in your document, insert the following code at the desired location:

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

You can then navigate to that specific position by using this link:

<a href="#scroll-anchor">Scroll to anchor!</a>

Answer 3

Answer №2

If you're looking to accomplish this in an ionic way, take a look at the documentation

Here's how you can do it in HTML:

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

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

Then, in your JavaScript file:

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
  };
});

Answer 4

If you're looking to accomplish this in an ionic way, take a look at the documentation

Here's how you can do it in HTML:

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

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

Then, in your JavaScript file:

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
  };
});

Displaying a label in AngularJS and Ionic based on the current scroll position

Answer №1

Answer №2

Similar questions

The route function is not being executed

Is there a way to divide my time during work hours using Javascript?

Tips for displaying a slideshow within a div using JavaScript

Troubleshooting the Autocomplete Problem in Kendo UI AngularJS with ngMap

Issue with Sequelize failing to update a row within a database table

Different Option for Ajax/Json Data Instead of Using Multiple Jquery Append Operations

The powerful combination of AJAX and the onbeforeunload event

Encountering an error with [object%20Object] when utilizing ajaxFileUpload

Enhancing Forms with Redux and Styled Components

Header frame is not valid

Send an ArrayList to jQuery Flot

IE8 and IE9 encountering "Access is denied" error due to XML causing XDomainRequest (CORS) issue

Tips for bringing in an npm package in JavaScript stimulus

What is the reason for this Javascript regular expression only successfully matching two out of three identical strings when filtering?

Accessing JSON array values in a nested controller in AngularJS can be achieved by using

Guide to converting a form into a structured object format (with a tree layout)

Can AR.js be used to implement extended tracking in Augmented Reality on the web?

Three.js interpolation surface solution

Getting the ng-model value from a Directive's template and passing it to a different HTML file

A more efficient method for refreshing Discord Message Embeds using a MessageComponentInteraction collector to streamline updates