javascript - Bästa sättet i Angular 6 att kontrollera att ett rullbart område är scrollat längst ner

Jag försöker hitta en bra fungerande lösning för Angular 6 för att kontrollera den scrollbara värdkomponenten om den har scrollat till botten eller inte.

Jag kan inte hitta något fungerande exempel på en funktion som kontrollerar om en anpassad scrollbar behållare (som en div eller vad som helst) är max bottom scrollad eller inte. Jag hittade något om IntersectionObserver men jag tror inte att det är det jag behöver. Har också provat ett par vanliga JS-funktioner, men kanske har jag bara inte färdigheterna för att få dem att fungera i Angular.

Här är en Stackblitz: https://stackblitz.com/edit/mark6-messenger

Vänligen ha i åtanke att jag behöver detta för ett öppet källkodsprojekt. <ng-container är i mitt fall den scrollbar behållaren: https://github.com/DevMonkeysDE/ngx-mark6/blob/master/projects/mark6-lib/src/lib/messenger/messenger-history.html#L1

Det måste fungera utan att människor behöver lägga till några funktioner, id eller något annat i komponenten senare. Logiken måste fungera inne i komponenten.

Svar #1

Till slut listade jag ut ditt problem... Men jag gjorde det med ren JavaScript vilket fungerar bra för mig. Jag tittade i din kod. Vänligen gör nedanstående ändringar och låt mig veta om det är det du letade efter.

1. site-messenger.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-messenger.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>

Jag har lagt till id till din komponent. Nu, om jag scrollar din komponent till botten, kommer den att visa mig en konsollogga att din komponent är i botten.

Observera - 0,55 läggs till med hänsyn till din marginal.

Relaterade artiklar