Forum Discussion
In SPFX header/footer extensions, can I make footer scroll down along the main content of the page
I am using react SharePoint Framework Extensions to create my header and footer for the site. Right now the footer is fixed, as it will stay on the page even if you scroll down the content. As my foo...
- If you want to achieve scroll-able footer SPFX header/footer extensions will not be a good idea as the SPFX footer extension has fixed positioning over the scroll-able area
Please have look at the conversation.
https://github.com/SharePoint/sp-dev-docs/issues/785
Hope this helps,
Thuyavan
Diego_Longhi Can you please share reference URL or implementation code snippets here ?
this is not "the supported way of doing things", it can break anytime as ms updates the layout structure, so use at your own risk. This is not the entire code, so probably you will have to edit it to work, but will help.
const reactElement = = React.createElement( ); const mainContent = document.querySelector('[role="main"]'); mainContent.addEventListener('scroll', (event) => { if ((event.currentTarget as unknown as HTMLElement).getAttribute("role") === "main") { const currentDiv = (event.currentTarget as HTMLDivElement); if ((currentDiv.scrollTop + 100) >= currentDiv.scrollHeight - currentDiv.offsetHeight - currentDiv.offsetTop) { if (this.footerRenderTries === 0 && window['footerRendered'] === false) { this.replaceStandardFooter(); } else { const standardFooter = document.querySelector('[data-automationid="MegaFooter"]'); if (typeof standardFooter !== 'undefined' && standardFooter) { standardFooter.remove(); } } } } }); const replaceStandardFooter = (): void => { try { this.footerRenderTries = this.footerRenderTries + 1; const standardFooter = document.getElementsByTagName('footer'); ReactDOM.render(reactElement, standardFooter[0]); window['footerRendered'] = true; } catch (erroFooter) { if (this.footerRenderTries <= 20) { console.error(); await delay(1000); this.replaceStandardFooter(); } else { console.error(); this.footerRenderTries = 0; } } }
const reactElement = = React.createElement( ); const mainContent = document.querySelector('[role="main"]'); mainContent.addEventListener('scroll', (event) => { if ((event.currentTarget as unknown as HTMLElement).getAttribute("role") === "main") { const currentDiv = (event.currentTarget as HTMLDivElement); if ((currentDiv.scrollTop + 100) >= currentDiv.scrollHeight - currentDiv.offsetHeight - currentDiv.offsetTop) { if (this.footerRenderTries === 0 && window['footerRendered'] === false) { this.replaceStandardFooter(); } else { const standardFooter = document.querySelector('[data-automationid="MegaFooter"]'); if (typeof standardFooter !== 'undefined' && standardFooter) { standardFooter.remove(); } } } } }); const replaceStandardFooter = (): void => { try { this.footerRenderTries = this.footerRenderTries + 1; const standardFooter = document.getElementsByTagName('footer'); ReactDOM.render(reactElement, standardFooter[0]); window['footerRendered'] = true; } catch (erroFooter) { if (this.footerRenderTries <= 20) { console.error(); await delay(1000); this.replaceStandardFooter(); } else { console.error(); this.footerRenderTries = 0; } } }
