diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index b9b9f5589..65ff78737 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -77,6 +77,24 @@ const BrewRenderer = (props)=>{ rawPages = props.text.split(/^\\page$/gm); } + const scrollToHash = (hash) => { + const iframeDoc = document.getElementById('BrewRenderer').contentDocument; + let anchor = iframeDoc.querySelector(hash); + + if (anchor) { + anchor.scrollIntoView({ behavior: 'smooth' }); + } else { + // Use MutationObserver to wait for the element if it's not immediately available + new MutationObserver((mutations, obs) => { + anchor = iframeDoc.querySelector(hash); + if (anchor) { + anchor.scrollIntoView({ behavior: 'smooth' }); + obs.disconnect(); + } + }).observe(iframeDoc, { childList: true, subtree: true }); + } + }; + const updateCurrentPage = useCallback(_.throttle((e)=>{ const { scrollTop, clientHeight, scrollHeight } = e.target; const totalScrollableHeight = scrollHeight - clientHeight; @@ -150,6 +168,8 @@ const BrewRenderer = (props)=>{ }; const frameDidMount = ()=>{ //This triggers when iFrame finishes internal "componentDidMount" + scrollToHash(window.location.hash); + setTimeout(()=>{ //We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame renderPages(); //Make sure page is renderable before showing setState((prevState)=>({ diff --git a/client/homebrew/brewRenderer/brewRenderer.less b/client/homebrew/brewRenderer/brewRenderer.less index 81e7e4f22..177576abc 100644 --- a/client/homebrew/brewRenderer/brewRenderer.less +++ b/client/homebrew/brewRenderer/brewRenderer.less @@ -18,6 +18,9 @@ margin-left : auto; box-shadow : 1px 4px 14px #000000; } + *[id] { + scroll-margin-top:100px; + } } &::-webkit-scrollbar { width : 20px;