CODEWITHSUNDEEP
javascriptangulartypescriptangular6
Budi
Budi

Reputation: 688

Best way in Angular 6 to check that a scrollable area is scrolled max bottom

I try to find a good working solution for angular 6 to check the scrollable host component that its max scrolled bottom or not.

I cant find any working example for a function that checks if a custom scrollable container (like a div or what ever) is max bottom scrolled or not. I found something about IntersectionObserver but i think this is not that what i need. Tryed also couple of vanilla JS functions, but maybe i just dont have the skills to make them work in angular.

Here a Stackblitz: https://stackblitz.com/edit/mark6-messenger

Please keep in mind that i need this for a open Source Project. The <ng-container is in my ase the scrollable container: https://github.com/DevMonkeysDE/ngx-mark6/blob/master/projects/mark6-lib/src/lib/messenger/messenger-history.html#L1

It must work without that people need to add later on the coponent any functions, ids or something else. The logic must work component inside.

Upvotes: 4

Views: 1802

Answers (1)

Flutterian
Flutterian

Reputation: 1781

Finally figured out your issue... But I did it with pure JavaScript which is working fine for me. I checked in your code. Please do the below changes and do let me know is that you was looking for.

1. site-messanger.component.ts

@HostListener('scroll', ['$event']) 
        public scrollHandler(event) {
         let obj = document.getElementById('markMessageHistory');
         let objScrollHeight = Math.round((obj.scrollTop) * 100) / 100;
        if ( (objScrollHeight) === (obj.scrollHeight - obj.offsetHeight - 0.55)) {
                console.log('object to bottom');
            }
    }

2. site-messanger.template.html

<mark6-messenger-history id="markMessageHistory" (scroll)="scrollHandler($event)">
                    <mark6-messenger-message [messages]="messages" [avatarMe]="false" [avatarOthers]="true"></mark6-messenger-message>
                </mark6-messenger-history>

I have added id to your component. Now if I scroll your component till bottom it will show me console log that your component is at bottom.

Note - The 0.55 is added by considering your margin.

Upvotes: 4

Related Questions