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

Question

我试图为 angular 6 找到一个好的工作解决方案来检查可滚动主机组件是否最大滚动底部。

我找不到检查自定义可滚动容器(如 div 或其他)是否为 max bottom 的函数的任何工作示例滚动与否​​。我发现了一些关于 IntersectionObserver 的东西但我认为这不是我需要的。还尝试了几个 vanilla JS 函数，但也许我只是没有让它们以 Angular 工作的技能。

这里是 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 是根据您的 margin 添加的。