锁定滚动位置时，懒惰的滚动滚动(向上滚动)

Question

我的应用程序中有一个对话/whatsapp功能。最新消息在底部，最古老的消息在顶部。

当我在消息顶部滚动时，它会自动加载更多的加载，但我想将滚动位置保持在位置。我创建了一个执行此操作的指令，但问题在于闪烁。似乎发生的事情是加载了新消息，滚动位置已重置为顶部。然后，我的指示将滚动位置重置为原来的位置。因此，它有效，但看起来不太好。

有人有任何线索如何解决此问题吗？

html：

<div class="conversation-scroll-container" scroll-lock="{{ vm.isLoading }}">

vm（加载消息功能）：

return this.messageService
    .getMessages(conversation, dates)
    .then(data => {
        this.selectedConversation.applyNewMessages(data);
        return data;
    })
    .finally(() => {
            this.isLoading = false;
    });

最后该指令（在TS中）：

export class ScrollLockDirective implements angular.IDirective {
    public restrict = "A";
    private scrollLock = false;
    private scrollLockOffset = 0;
    constructor(private $timeout: angular.ITimeoutService) { }
    static factory(): ng.IDirectiveFactory {
        const directive = ($timeout: angular.ITimeoutService) => new ScrollLockDirective($timeout);
        directive.$inject = ["$timeout"];
        return directive;
    }
    public link = (scope: angular.IScope, element: angular.IAugmentedJQuery, attributes: angular.IAttributes) => {
        attributes.$observe("scrollLock", () => {
            if (attributes["scrollLock"] === "true") {
                this.scrollLock = true;
            }
            else {
                this.doLockScroll(element);
                this.scrollLock = false;
            }
        });
        element.bind("scroll", () => {
            this.doLockScroll(element);
        });
        scope.$on("$destroy", () => {
            element.unbind("scroll");
        });
    }
    private doLockScroll(element: angular.IAugmentedJQuery) {
        if (this.scrollLock) {
            this.$timeout(() => {
                element.scrollTop(element[0].scrollHeight - this.scrollLockOffset);
            });
        } else {
            this.scrollLockOffset = element[0].scrollHeight - element.scrollTop();
        }
    }
}

Answer 1

我遇到了与您和您相同的问题。