'%3e%3cpath%20d='M8%200C12.4183%200%2016%203.58172%2016%208C16%2012.4183%2012.4183%2016%208%2016C3.58172%2016%200%2012.4183%200%208C0%203.58172%203.58172%200%208%200ZM11.6162%204.38379C11.2257%203.99337%2010.5927%203.99338%2010.2021%204.38379L8%206.58594L5.79785%204.38379C5.40732%203.99334%204.77429%203.99329%204.38379%204.38379C3.99331%204.77429%203.99335%205.40733%204.38379%205.79785L6.58594%208L4.38379%2010.2021C3.99348%2010.5927%203.99341%2011.2257%204.38379%2011.6162C4.77426%2012.0066%205.40734%2012.0065%205.79785%2011.6162L8%209.41406L10.2021%2011.6162C10.5927%2012.0066%2011.2257%2012.0067%2011.6162%2011.6162C12.0067%2011.2257%2012.0066%2010.5927%2011.6162%2010.2021L9.41406%208L11.6162%205.79785C12.0066%205.40735%2012.0066%204.77429%2011.6162%204.38379Z'%20fill='%23080E17'%20fill-opacity='0.46'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_3761_713'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
How to Stop a SharePoint Embedded Web Part from Scrolling the Main Page
Question details
The user needs to prevent an embedded chatbot within a SharePoint Web Part from causing the entire SharePoint page to scroll when new messages are sent or received.
- Product
- Microsoft SharePoint
- Device & OS
- not provided
- Scenario
- Embedding a third-party application or chatbot into a SharePoint page using an iframe Embed Web Part.
- Observed behavior
- When new messages appear, both the chatbot's message log and the surrounding SharePoint main page scroll simultaneously. This occurs across multiple browsers even when the iframe scrolling attribute is disabled.
Ensure you have page editing permissions in SharePoint and, if possible, administrative access to the source code of the embedded chatbot application.
Modify the Embedded Application's JavaScript and CSS
The most effective solution is to address the scrolling behavior directly within the embedded application's code, preventing it from forcing the parent page to move.
The iframe 'scrolling' attribute only controls the scrollbars of the iframe itself. If the embedded application uses JavaScript functions like scrollIntoView() or sets focus on new elements, the browser will automatically scroll the main SharePoint page to bring those elements into view.
Open the source code or developer settings for the embedded chatbot application.
Search the JavaScript code for functions such as element.scrollIntoView() or element.focus() that trigger when new messages are added.
Wrap the message log in a fixed-height container using CSS. Apply the property 'overflow-y: auto' to this container so that scrolling is strictly contained within the chat area.
Save the changes to your chatbot application and refresh the SharePoint page to verify the main page no longer scrolls.
Contact the Application Developer
If you do not have control over the chatbot's source code, you must request a fix from the third-party developer.
Verify iframe Embed Code Settings
Check your SharePoint Embed Web Part to ensure basic iframe scrolling attributes are correctly applied, which helps prevent double scrollbars.
Looking for a seamless alternative to Microsoft Office? Try WPS Office.
While troubleshooting complex SharePoint and web part integrations, streamline your daily document, spreadsheet, and presentation tasks with WPS Office. It provides a highly compatible, lightweight, and free alternative to the Microsoft Office suite.
- 1. Download the installer: Visit the official WPS Office website and click the free download button for your operating system.
- 2. Install the software: Run the downloaded installer and follow the quick on-screen instructions to set up WPS Office.
- 3. Open your documents: Launch WPS Office and open your existing Microsoft Office files directly with perfect formatting compatibility.
Frequently Asked Questions
Why does scrolling="no" on my iframe not stop the SharePoint page from scrolling?
The scrolling="no" attribute only disables the visual scrollbars on the iframe element itself. If the application inside the iframe executes JavaScript commands like element.scrollIntoView() or sets focus on new text elements, modern web browsers will automatically scroll the parent SharePoint page to bring that focused element into the user's viewport.
Can I block an iframe from scrolling the parent page using SharePoint settings?
No, SharePoint's native Embed Web Part settings cannot block a cross-origin iframe's internal JavaScript from triggering browser-level focus scrolling. The resolution must be implemented directly within the embedded application's source code.
What CSS properties help contain scrolling within a specific element?
To prevent an element from affecting the main page's scroll position, give its container a fixed height (for example, height: 400px;) and apply the CSS property overflow-y: auto;. This configuration forces the content to scroll only within that specific container.
Will using a different web browser fix the iframe scrolling issue?
Typically, no. The automatic scrolling behavior triggered by JavaScript focus or scroll commands is a standardized accessibility and usability feature across most modern browsers, including Google Chrome, Microsoft Edge, and Mozilla Firefox.
