diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx index ac0efe32747..9f2260c4349 100644 --- a/packages/main/src/components/ObjectPage/index.tsx +++ b/packages/main/src/components/ObjectPage/index.tsx @@ -155,14 +155,17 @@ const ObjectPage: FC = forwardRef((props: ObjectPagePropTyp const lastSectionDomRef = sections[sections.length - 1]; const subSections = lastSectionDomRef.querySelectorAll('[id^="ObjectPageSubSection"]'); - let domRef = null; + let lastSubSectionHeight = null; if (subSections.length > 0) { - domRef = subSections[subSections.length - 1]; + lastSubSectionHeight = (subSections[subSections.length - 1] as HTMLElement).offsetHeight; } else { - domRef = lastSectionDomRef; + lastSubSectionHeight = + (lastSectionDomRef as HTMLElement).offsetHeight - + (lastSectionDomRef.querySelector("[role='heading']") as HTMLElement).offsetHeight; } - let heightDiff = contentContainer.current.offsetHeight - domRef.offsetHeight; + let heightDiff = contentContainer.current.offsetHeight - lastSubSectionHeight; + heightDiff = heightDiff > 0 ? heightDiff : 0; fillerDivDomRef.current.style.height = `${heightDiff}px`; setScrollbarHeight(); @@ -239,6 +242,7 @@ const ObjectPage: FC = forwardRef((props: ObjectPagePropTyp if (typeof image === 'string') { avatar = ( @@ -399,6 +403,7 @@ const ObjectPage: FC = forwardRef((props: ObjectPagePropTyp // @ts-ignore const id = Children.toArray(children)[selectedSectionIndex].props.id; if (id) { + debugger; scroller.current.scrollToElementById(`ObjectPageSection-${id}`, 45); } } else { @@ -442,15 +447,17 @@ const ObjectPage: FC = forwardRef((props: ObjectPagePropTyp if (expandHeaderActive) { setExpandHeaderActive(false); } - - const threshold = 64; + const thresholdCollapse = 64; + const thresholdExpand = 52; const baseScrollValue = activeContainer.current === contentContainer.current ? e.target.scrollTop : getProportionateScrollTop(activeInnerContainer, passiveInnerContainer, e.target.scrollTop); - const shouldBeCollapsed = baseScrollValue > threshold; - if (collapsedHeader !== shouldBeCollapsed) { + let shouldBeCollapsed = !collapsedHeader && baseScrollValue > thresholdCollapse; + let shouldBeExpanded = collapsedHeader && baseScrollValue < thresholdExpand; + + if (shouldBeCollapsed || shouldBeExpanded) { lastScrolledContainer.current = activeContainer.current; if (shouldBeCollapsed) { collapsedHeaderFiller.current.style.height = `${64}px`; @@ -463,7 +470,7 @@ const ObjectPage: FC = forwardRef((props: ObjectPagePropTyp setCollapsedHeader(shouldBeCollapsed); } else { const newScrollValue = - collapsedHeader && e.target.scrollTop > threshold + 50 + collapsedHeader && e.target.scrollTop > thresholdCollapse + 50 ? e.target.scrollTop : getProportionateScrollTop(activeInnerContainer, passiveInnerContainer, e.target.scrollTop);