ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bug of scroll to bottom is fixed

Browse Source
This commit is contained in:
richard-loafle 2020-02-11 18:07:42 +09:00
parent 7094ebddfd
commit 3f7f3e0f4f
3 changed files with 40 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
View File

@ -87,5 +87,10 @@
fxFlexFill
class="chat-messages-buffer-container disappear"
>
<div #chatMessagesBuffer fxFlexFill class="chat-messages-buffer"></div>
<div
#chatMessagesBuffer
fxFlexFill
perfectScrollbar
class="chat-messages-buffer"
></div>
</div>

4
projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
View File

@ -160,6 +160,10 @@ $tablet-l-width: 1024px;
opacity: 0 !important;
}
.show {
opacity: 1 !important;
}
.disappear {
display: none !important;
}

47
projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
View File

@ -120,6 +120,9 @@ export class MessagesComponent implements OnInit, OnDestroy {
@ViewChild('chatMessagesBufferContainer', { static: false })
chatMessagesBufferContainer: ElementRef<HTMLElement>;
@ViewChildren(PerfectScrollbarDirective)
psDirectiveRefList: QueryList<PerfectScrollbarDirective>;
@ViewChild(VirtualScrollerComponent, { static: false })
private virtualScroller: VirtualScrollerComponent;
@ -404,22 +407,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
}
storeScrollPosition() {
this.storedScrollItem = this.eventList[
this.virtualScroller.viewPortInfo.startIndex
];
const chatMessageBox = this.chatMessageBoxList.find(
el =>
el.message.seq ===
this.eventList[this.virtualScroller.viewPortInfo.startIndex].seq
);
if (!!chatMessageBox) {
this.storedScrollItemOffsetTop =
chatMessageBox.offsetTop -
this.virtualScroller.viewPortInfo.scrollStartPosition;
} else {
this.storedScrollItemOffsetTop = 0;
}
this.storedScrollItemOffsetTop = this.getOffsetTop();
}
swapScrollTo(
@ -457,11 +445,19 @@ export class MessagesComponent implements OnInit, OnDestroy {
preSwapScroll(useHide: boolean, useSwap: boolean) {
if (useSwap && !this.swapped) {
this.chatMessagesBufferContainer.nativeElement.classList.add('hide');
this.chatMessagesBuffer.nativeElement.innerHTML = this.chatMessagesContainer.nativeElement.innerHTML;
this.chatMessagesBuffer.nativeElement.scrollTop = this.chatMessagesContainer.nativeElement.scrollTop;
this.chatMessagesBufferContainer.nativeElement.classList.remove(
'disappear'
);
this.chatMessagesBuffer.nativeElement.scrollTop = this.virtualScroller[
// tslint:disable-next-line: no-string-literal
'element'
].nativeElement.scrollTop;
this.chatMessagesBufferContainer.nativeElement.classList.remove('hide');
this.swapped = true;
}
@ -702,4 +698,21 @@ export class MessagesComponent implements OnInit, OnDestroy {
item2: Info<EventJson>
// tslint:disable-next-line: semicolon
): boolean => !!item1 && !!item2 && item1.seq === item2.seq;
private getOffsetTop(): number {
this.storedScrollItem = this.eventList[
this.virtualScroller.viewPortInfo.startIndex
];
const chatMessageBox = this.chatMessageBoxList.find(
el =>
el.message.seq ===
this.eventList[this.virtualScroller.viewPortInfo.startIndex].seq
);
return !!chatMessageBox
? chatMessageBox.offsetTop -
this.virtualScroller.viewPortInfo.scrollStartPosition
: 0;
}
}