mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-15 15:44:45 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix scroll bugs (#487)

Browse source 
* Check line presence before calculating position
* Fix jump bug
This commit is contained in:
mrdrogdrog 2020-08-26 21:59:03 +02:00 • committed by GitHub
parent 8a9c2c923d
commit 52fb372b9b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/editor/document-renderer-pane/document-render-pane.tsx
View file

@ -52,20 +52,24 @@ export const DocumentRenderPane: React.FC<DocumentRenderPaneProps & ScrollProps>
if (!renderer.current || !lineMarks || !onScroll) {
return
}
const resyncedScroll = Math.ceil(renderer.current.scrollTop) === lastScrollPosition.current
if (resyncedScroll) {
return
}
const scrollTop = renderer.current.scrollTop
const beforeLineMark = lineMarks
.filter(lineMark => lineMark.position <= scrollTop)
const lineMarksBeforeScrollTop = lineMarks.filter(lineMark => lineMark.position <= scrollTop)
if (lineMarksBeforeScrollTop.length === 0) {
return
}
const lineMarksAfterScrollTop = lineMarks.filter(lineMark => lineMark.position > scrollTop)
if (lineMarksAfterScrollTop.length === 0) {
return
}
const beforeLineMark = lineMarksBeforeScrollTop
.reduce((prevLineMark, currentLineMark) =>
prevLineMark.line >= currentLineMark.line ? prevLineMark : currentLineMark)
const afterLineMark = lineMarks
.filter(lineMark => lineMark.position > scrollTop)
const afterLineMark = lineMarksAfterScrollTop
.reduce((prevLineMark, currentLineMark) =>
prevLineMark.line < currentLineMark.line ? prevLineMark : currentLineMark)
@ -79,7 +83,7 @@ export const DocumentRenderPane: React.FC<DocumentRenderPaneProps & ScrollProps>
return (
<div className={'bg-light flex-fill pb-5 flex-row d-flex w-100 h-100 overflow-y-scroll'}
ref={renderer} onScroll={userScroll} onMouseEnter={onMakeScrollSource} >
ref={renderer} onScroll={userScroll} onMouseEnter={onMakeScrollSource}>
<div className={'col-md'}/>
<MarkdownRenderer
className={'flex-fill mb-3'}