Geek Answers Handbook

How to show a warning when a user scrolls to the top of a div in angular js?

Hi, please, how to show a warning when scrolling at the top of a div in angular js and the same when the user scrolls down. In fact, I know how to do this in jquery using if (this.scrollTop === 0). But I am using ionic structure with angular js. You could tell me how to get an event when the user scrolls up and shows a warning.

here is my plunker http://plnkr.co/edit/8bqDi69oiBKTpDvCaOf6?p=preview

<body ng-controller="MyController"> <div style="width:90%;height:150px;border:1px solid red;overflow:auto;overflow-y: scroll"> <div ng-repeat="n in name">{{n.name}}</div> </div>
+5
source share
3 answers

Angular won't provide you anything for this, you just need to bind the scroll event to the element. In my current project, I just created an event in the controller:

 var container = angular.element(document); container.on('scroll', function() { if (container.scrollTop() > 1000) { $('#scroll-top-button').addClass('show'); } else { $('#scroll-top-button').removeClass('show'); } }); // in your case angular.element(document) should be your div instead of document

It works very well (I would expect that if in the scroll event some resource would cost, but not really).

Angular directive

An easy way is to define a directive to bind the scroll event and view the position. Based on your code:

 angular.module('ionicApp', ['ionic']) .directive("scrollable", function() { return function(scope, element, attrs) { var container = angular.element(element); container.bind("scroll", function(evt) { if (container[0].scrollTop <= 0) { alert('On the top of the world I\'m singing I\'m dancing.'); } if (container[0].offsetHeight + container[0].scrollTop >= container[0].scrollHeight) { alert('On the bottom of the world I\'m waiting.'); } }); }; }) .controller('MyController', function($scope, $element) { $scope.name = [{ ... }]; });

Then in your HTML just add the directive

 <div scrollable style="width:90%;height:1...

I updated the version on your plunker (v5) , which works for me and seems pretty strong for global compatibility. Low level;)

Alternative library

If you want to implement some deeper function, you can use a library like waypoint

Waypoints is a library that simplifies the execution of a function whenever you go to an element. http://imakewebthings.com/waypoints/

It works great, very lightweight, and since v3.0 is jQuery free: D. I know that some hardcore designer interface uses it without any performance issues.

+7
source

You need to use the directive so that you connect your element to the server.

I created a directive that is very similar to sebastionbarbier one without the binding part, but I assume that using the link does almost the same as bind.

  link: function(scope, element, attr) { element.on('scroll', function() { if(element[0].scrollTop == 0) alert('show alert'); });

http://plnkr.co/edit/ra6HLvEsPBPHeNqVVI4c?p=preview

+1
source

I disagree with the other answers, but you should try not to use any global function in Angular, for example. alert() ; You should try to add dependencies.

Instead, use $window.alert by typing $window into your directive. You can then unit test the behavior, for example using Jasmine spyOn($window, "alert") . For instance:.

 spyOn($window, "alert"); expect($window.alert).toHaveBeenCalled();
0
source

More articles:


All Articles