hello could you please how to show alert when scroll to top of div in angular js and same in when user scroll to bottom .Actually I know How to achieve this in jquery using if(this.scrollTop===0).But I am using ionic framework with angular js .So could could you please tell me how to get event when user scroll to top and show the alert .
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>
Angular will not provide you anything for this, you just need to bind a scroll event on your element. In my current project I have just created an event in my controller :
It does perform very well (I would expect a
if
on scroll event to cost some ressource but not really).Angular directive
Easy way is to define a directive to bind a scroll event and look at position. Based on your code :
Then in your HTML just add the directive
I updated a version on your plunker (v5) which work for me and seems pretty strong for global compatibility. Did it low level ;)
Alternative library
If you want to implement some deeper feature you can use a library like waypoint
It works really well too, is very light, and since v3.0 is jQuery free :D. I know some hardcore front-end designer using it without any performance issue.