Call function with angular when scrolling

Question

Is there a way to detect, if a element was scrolled and call a function and do some stuff with angularJS? Something like a ng-scroll or so, which works simply like a ng-click? I didn't really find a solution...

This is what I would like to do:

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.checkIfScrolling = function() {
    console.log("scrolled...");
  }
});

.box-scroll {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100px;
  background-color: lightgrey;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div app="myApp" controller="myController" class="box-scroll" ng-scroll="checkIfScrolling()">
  <div class="box-item">I'm an item within box-scroll</div>
  <div class="box-item">I'm an item within box-scroll</div>
  <div class="box-item">I'm an item within box-scroll</div>
  <div class="box-item">I'm an item within box-scroll</div>
  <div class="box-item">I'm an item within box-scroll</div>
  <div class="box-item">I'm an item within box-scroll</div>
  <div class="box-item">I'm an item within box-scroll</div>
  <div class="box-item">I'm an item within box-scroll</div>
  <div class="box-item">I'm an item within box-scroll</div>
  <div class="box-item">I'm an item within box-scroll</div>
  <div class="box-item">I'm an item within box-scroll</div>
</div>

Mathew Berg · Accepted Answer · 2017-07-07 12:32:26Z

1

Nothing native, you'd have to wire up your own directive using the onscroll event:

https://developer.mozilla.org/en-US/docs/Web/Events/scroll

answered Jul 7, 2017 at 12:32

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vikash Kumar · Accepted Answer · 2017-07-07 12:43:57Z

1

It can be achieved without any directive also

window.addEventListener('scroll', function(e) {
  //action to be performed
});

answered Jul 7, 2017 at 12:43

Vikash Kumar

1,7161 gold badge12 silver badges17 bronze badges

2 Comments

webta.st.ic Over a year ago

What's the best way to put this in a controller of a ng component?

Vikash Kumar Over a year ago

Create a directive as ng-scroll and then u can add this functionality inside the link: of the diretive.

Collectives™ on Stack Overflow

Call function with angular when scrolling

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related