scroll properly when switching tabs

This commit is contained in:
Anthony 2021-07-24 22:32:51 +02:00
parent 1e55acdfa0
commit 71ffd21b7f
No known key found for this signature in database
GPG key ID: C386D3C93D50E356

View file

@ -156,10 +156,15 @@ export default function LivestreamComments(props: Props) {
'button-toggle--active': viewMode === VIEW_MODE_CHAT, 'button-toggle--active': viewMode === VIEW_MODE_CHAT,
})} })}
label={__('Chat')} label={__('Chat')}
onClick={() => setViewMode(VIEW_MODE_CHAT)} onClick={function() {
setViewMode(VIEW_MODE_CHAT);
const livestreamCommentsDiv = document.getElementsByClassName('livestream__comments')[0]
const divHeight = livestreamCommentsDiv.scrollHeight;
livestreamCommentsDiv.scrollTop = divHeight;
}}
/> />
{/* the list by tip amount value button */} {/* the button to show superchats listed by most to least support amount */}
<Button <Button
className={classnames('button-toggle', { className={classnames('button-toggle', {
'button-toggle--active': viewMode === VIEW_MODE_SUPER_CHAT, 'button-toggle--active': viewMode === VIEW_MODE_SUPER_CHAT,
@ -170,7 +175,12 @@ export default function LivestreamComments(props: Props) {
<CreditAmount amount={superChatsTotalAmount} size={8} isFiat={true} /> {' '}{__('Tipped')} <CreditAmount amount={superChatsTotalAmount} size={8} isFiat={true} /> {' '}{__('Tipped')}
</> </>
} }
onClick={() => setViewMode(VIEW_MODE_SUPER_CHAT)} onClick={function() {
setViewMode(VIEW_MODE_SUPER_CHAT);
const livestreamCommentsDiv = document.getElementsByClassName('livestream__comments')[0]
const divHeight = livestreamCommentsDiv.scrollHeight;
livestreamCommentsDiv.scrollTop = divHeight * -1;
}}
/> />
</div> </div>
)} )}
@ -236,7 +246,6 @@ export default function LivestreamComments(props: Props) {
commentIsMine={comment.channel_id && isMyComment(comment.channel_id)} commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
/> />
))} ))}
</div> </div>
) : ( ) : (
<div className="main--empty" style={{ flex: 1 }} /> <div className="main--empty" style={{ flex: 1 }} />