search

SharePoint / sp-dev-docs

SharePoint & Viva Connections Developer Documentation
https://docs.microsoft.com/en-us/sharepoint/dev/
Creative Commons Attribution 4.0 International
1.24k stars 1k forks source link

Auto scroll using 'scrollIntoView' on SharePoint Online page having multiple asynchronous components #9554

Closed vishalshitole closed 4 weeks ago

vishalshitole commented 6 months ago

What type of issue is this?

Question

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Target SharePoint environment

SharePoint Online

What browser(s) / client(s) have you tested

Additional environment details

Issue description

I have a large SPFx web part added on SPO page having multiple React components. I want to programmatically scroll to one of these component (target component) situated at the bottom of the page based on the hash value in my page URL. I was able to do that using scrollIntoView() method. But, some of the top components interacts with APIs, loads asynchronously after the target component, and push it down (sometimes out of the viewport).

To resolve this I used mutation observer from the observer's family. This observer correctly reacts to the changes in top components and adjusts the scroll to the target component. But, there is a catch. We also need to disconnect these observers at some point based on some condition, else observer continues to observe the changes, and if there is any (e.g. UI change), scroll adjustment happens again which is not expected.

In my case, I need to disconnect the mutation observer when auto scrolling is finished completely. i.e. all async components finished loading and final auto scroll adjustment has happened. I couldn't find any hook in SPFx and/or React lifecycle for this.

The best solution I could think of for this was to add user interaction listeners on window such as scroll, mousedown, click, etc. When user performs any of these interactions on screen, I disconnect the observer. This works perfectly fine except for 'scroll' event. This is because on SPO page scrolling doesn't apply to whole page, instead it applies to specific div with attribute 'data-automation-id="contentScrollRegion"'. If I add 'scroll' event listener to this div it works fine. But, I am not keen to use it as SPO may change it in future and my functionality will no longer work.

The 'scroll' event is important, because it is the first and foremost action that user may perform on any given page.

Am I missing anything here? Do I have any other option to achieve what I want to achieve?

Thanks in advance!

ghost commented 6 months ago

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

AJIXuMuK commented 4 weeks ago

@vishalshitole - sorry for the long delay. Please, check this discussion, it might help in your case: https://github.com/SharePoint/sp-dev-docs/discussions/7918