Angular 6中检查可滚动区域是否滚动到最大底部的最佳方法

Question

我尝试为 angular 6 找到一个好的工作解决方案，以检查其最大滚动底部的可滚动主机组件。

我找不到任何工作示例来检查自定义可滚动容器（如 div 或其他任何内容）是否已滚动 max bottom。我发现了一些关于IntersectionObserver 的信息，但我认为这不是我需要的。还尝试了几个香草 JS 功能，但也许我只是没有技能让它们以角度工作。

这里是 Stackblitz：https://stackblitz.com/edit/mark6-messenger

请记住，我需要这个用于开源项目。 <ng-container 在我看来是可滚动的容器：https://github.com/DevMonkeysDE/ngx-mark6/blob/master/projects/mark6-lib/src/lib/messenger/messenger-history.html#L1

它必须在没有人们以后需要在组件上添加任何functions、ids 或其他东西的情况下工作。逻辑必须在内部起作用。

Answer 1

终于解决了您的问题...但是我使用纯 JavaScript 做到了，这对我来说效果很好。我检查了你的代码。请进行以下更改，并让我知道您正在寻找。

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>

我已将 id 添加到您的组件中。现在，如果我将您的组件滚动到底部，它将向我显示您的组件位于底部的控制台日志。

注意 - 0.55 是根据您的边距添加的。