jothepro / doxygen-awesome-css

Custom CSS theme for doxygen html-documentation with lots of customization parameters.
https://jothepro.github.io/doxygen-awesome-css/
MIT License
1.04k stars 118 forks source link

Scroll Animation Issue #151

Closed hankhsu1996 closed 3 months ago

hankhsu1996 commented 3 months ago

Description:

I encountered a scroll animation issue when using the Doxygen Awesome Theme. While the theme looks great, the scrolling animation glitches and is not smooth when clicking on links to anchor points (e.g., <a href="#feature">feature</a>). This issue is present in both Edge and Chrome browsers.

Details:

I have attached a screen recording demonstrating the issue. I have not seen any other reports of this problem.

https://github.com/user-attachments/assets/0736f5b4-a100-4e22-95e0-d35613956018

hankhsu1996 commented 3 months ago

Upon investigation, I found at least two issues in the generated file navtree.js:

  1. When clicking an anchor, the gotoAnchor function is called twice. This double invocation causes a glitch because the second call messes up the position calculation.

    • One invocation from the anchor onClick listener, one inside the highlightAnchor function.
  2. The gotoAnchor function contains complex logic for calculating the scroll position, including some hardcoded values. I believe one of these values represents the distance from the anchor position to the top of the window. However, after animating to this position, the code then executes window.location.href = aname;, causing the browser to set the position with a different, browser-default anchor-to-top distance:

    docContent.animate({
      scrollTop: pos + dcScrTop - dcOffset
    }, Math.max(50, Math.min(500, dist)), function() {
      window.location.href = aname;
      animationInProgress = false;
    });

Both issues contribute to the observed glitch.

I can't find navtree.js in this repo, so it turns out the problem might be a Doxygen issue that is exposed by this theme.

Further investigation is needed.

hankhsu1996 commented 3 months ago

I realized there is a similar issue (#140) which has been addressed in doxygen/doxygen#10666. This fix is included in the Doxygen 1.11.0 release. While the gotoAnchor function still executes twice, the situation is significantly improved.

There might be ways to completely fix this issue in this repository by overriding the default listener. However, this approach would be quite tricky, requiring a MutationObserver to listen for DOM mutations and replace the old elements with new ones that implement the correct smooth scroll effect using scrollIntoView. Therefore, it may not be worth pursuing this method.

It would be beneficial to mention this in the README or documentation.