Topmost visible section instead of closest above center

[Anspitzen]

Referencing #2328, take the top most visible section as url reference instead of the clostest element.top to and above center line of app container

[akorchev]

Hi @Anspitzen,

Thank you for the pull request. For some reason I still see similar behavior as before - reloading the page scrolls to the wrong section. Here is what I see

[akorchev]

I did further investigation and it seems that most of the problem is the initial scroll - when the browser itself scrolls to the current anchor. Then our code runs and may detect a different section. Thus I propose this change which simply ignores the first scroll provided the conditions are met:

--- a/Radzen.Blazor/wwwroot/Radzen.Blazor.js
+++ b/Radzen.Blazor/wwwroot/Radzen.Blazor.js
@@ -2573,7 +2573,19 @@ window.Radzen = {
       const elements = selectors.map(document.querySelector, document);
 
       this.unregisterScrollListener(element);
+      let suppressInitialScroll = false;
+
+      if (selectors.indexOf(location.hash) !== -1) {
+        currentSelector = location.hash;
+        suppressInitialScroll = true;
+      }
+
       element.scrollHandler = () => {
+        if (suppressInitialScroll) {
+          suppressInitialScroll = false;
+          ref.invokeMethodAsync('ScrollIntoView', currentSelector);
+          return;
+        }
         const center = (container.tagName === 'HTML' ? 0 : container.getBoundingClientRect().top) + container.clientHeight / 2;

You can test the changes in the suppress-initial-scroll branch.

[akorchev]

Hi @Anspitzen,

Could you please test my change in the linked branch? It seems to work fine but I want to be sure your case works too.