Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angularjs: How to trigger event when scroll reaches to the bottom of the scroll bar in div?

Tags:

I'm trying to trigger an event when scroll bar reaches the end. I found this this example. Here is my code. The problem is that it doesn't call loadmore() at all. The values of the console statments are:

848 899 in scroll 881 899 in scroll 892 899 in scroll 897 899 in scroll 900 899 

It seems that it never goes to that if statement! The weird part is that if I debug it in inspect element then it triggers the event. ..... my directive:

directive('scrolly', function () {     return {         restrict: 'A',         link: function (scope, element, attrs) {             var raw = element[0];             console.log('loading directive');             element.bind('scroll', function () {                 console.log('in scroll');                 console.log(raw.scrollTop + raw.offsetHeight);                 console.log(raw.scrollHeight);                 if (raw.scrollTop + raw.offsetHeight == raw.scrollHeight) { //at the bottom                     scope.$apply(attrs.scrolly);                 }             })         }     } 
like image 531
Sara Avatar asked Apr 29 '15 21:04

Sara


People also ask

How do I check if a scroll is at the bottom of a div?

To detect when a user scrolls to bottom of div with React, we can check if the sum of the scrollTop and clientHeight properties of a scrollable element is equal to the scrollHeight property of the same element. We call the useRef hook to create a ref and we assign the returned ref to the inner div, which is scrollable.

How do you check if a user has scrolled to the bottom angular?

Use the @HostListener decorator to listen for the window:scroll event. Use scrollHeight instead of offsetHeight or clientHeight if the content to hook the event to scrollable.


1 Answers

Instead of checking for equality, please check if the left side is greater than the right side in the if statement since that's the case for the scrollbar to be at the bottom.

raw.scrollTop + raw.offsetHeight > raw.scrollHeight 

Here is the working jsfiddle.

like image 104
Rathish Cholarajan Avatar answered Sep 28 '22 19:09

Rathish Cholarajan