Connecting Ionic/Angular directives to scrollbars

Question

Connecting Ionic/Angular directives to scrollbars

I'm having an issue with my scrolling div:

<div class="list">
  <div class="item" ng-repeat="post in posts">
    <img src="post.img" is-visible/>
  </div>
</div>

and I've implemented this directive:

angular.element(window).on('DOMContentLoaded load resize scroll', function () {
  console.log("window change");
});

The objective is to detect scrolls on the page. However, the problem lies in the fact that only the load and resize events are triggering the console comment. When scrolling up and down the list, it fails to trigger. Why could this be happening?

javascript angularjs ionic-framework

Answer 1

Answer №1

If you find yourself scrolling to a specific div with an ng-repeat directive, and have applied the scroll event on the window, it will not trigger until the window is scrolled to.

It is recommended to set the scroll event on the particular element that wraps around the ng-repeat element. This way, it can serve as the container for the list of posts.

Custom Markup Example

<div is-visible id="post-list" class="list" style="overflow-y:scroll;width: 400px;height: 120px;border: 1px solid gray;">
  <div id="post-{{$index}}" class="item card" ng-repeat="post in posts">
    Message: {{post.message}}
  </div>
</div>

Custom Directive Implementation

.directive('isVisible', function(){
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        element.on('scroll', function(){
           console.log('Scroll has been detected.');
        })
      }
    }
})

Check out the Plunkr demo

Answer 2

If you find yourself scrolling to a specific div with an ng-repeat directive, and have applied the scroll event on the window, it will not trigger until the window is scrolled to.

It is recommended to set the scroll event on the particular element that wraps around the ng-repeat element. This way, it can serve as the container for the list of posts.

Custom Markup Example

<div is-visible id="post-list" class="list" style="overflow-y:scroll;width: 400px;height: 120px;border: 1px solid gray;">
  <div id="post-{{$index}}" class="item card" ng-repeat="post in posts">
    Message: {{post.message}}
  </div>
</div>

Custom Directive Implementation

.directive('isVisible', function(){
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        element.on('scroll', function(){
           console.log('Scroll has been detected.');
        })
      }
    }
})

Check out the Plunkr demo

Answer 3

Answer №2

The content within the

<ion-content></ion-content>

block is in HTML and this component enables scrolling... therefore, it is necessary to establish a binding with it:

HTML

<ion-content id="my-content">
  <div is-visible id="post-list" class="list" style="overflow-y:scroll;width:   400px;height: 120px;border: 1px solid gray;">
    <div id="post-{{$index}}" class="item card" ng-repeat="post in posts">
      Message: {{post.message}}
    </div>
  </div>
</ion-content>

CUSTOM DIRECTIVE

.directive('isVisible', function(){
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        var parent = angular.element(document.querySelector('#my-content'));
        parent.on('scroll', function(){
           console.log('Scroll has been detected.');
        })
      }
    }
})

Answer 4

The content within the

<ion-content></ion-content>

block is in HTML and this component enables scrolling... therefore, it is necessary to establish a binding with it:

HTML

<ion-content id="my-content">
  <div is-visible id="post-list" class="list" style="overflow-y:scroll;width:   400px;height: 120px;border: 1px solid gray;">
    <div id="post-{{$index}}" class="item card" ng-repeat="post in posts">
      Message: {{post.message}}
    </div>
  </div>
</ion-content>

CUSTOM DIRECTIVE

.directive('isVisible', function(){
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        var parent = angular.element(document.querySelector('#my-content'));
        parent.on('scroll', function(){
           console.log('Scroll has been detected.');
        })
      }
    }
})

Connecting Ionic/Angular directives to scrollbars

Answer №1

Answer №2

Similar questions

Sorting through an array of objects nested within another array of objects

Issue with floating navigation bar functionality when resizing the page

Which is better for testing in Cypress: classes or functions?

"When testing with an API client, NextJS 13 successfully returns a response, however, the same response

Is there a messaging app that provides real-time updates for when messages are posted?

Whenever the Web Developer console in Firefox is activated, Angular.js experiences a sudden malfunction and stops functioning properly

Retrieve data by sorting based on the count column in a joined table with Sequelize

Is there a way for me to choose multiple checkboxes simultaneously?

Using AngularJS 1 to create a universal search filter for all values stored in an Array or JSON object

The function is returning the text rather than an object through my service

Tips for customizing the main select all checkbox in Material-UI React data grid

The implementation of async await within a switch case statement is failing to function properly

How to make a form in PHP that can be saved?

Unable to update a single object within an array using the spread operator

Having trouble with React throwing a SyntaxError for an unexpected token?

Dynamic creation of HTML/Ionic checkbox leads to ng-change not binding properly

The term 'EmployeeContext' is being utilized as a namespace in this scenario, although it actually pertains to a type.ts(2702)

Clear the local storage once the URL's view has been fully loaded

Challenges arising from the rendering of main.js in Vue.js

Tips for loading and updating data simultaneously in VUEJS from a single input