Left navigation auto scrolling and link changing on scrolling is not working

[achyuthannakula]

Hi

We found a bug while integrating ReDoc into our application. While scrolling the left navigation bar is not scrolling or auto collapsed or even highlighted and even the link in the navigation bar is not changing. Please check the video

Our application is a SPA built using react and the redoc version we are using is 2.0.0-rc.26.

const APIRef = props => {
  return (
    <div id="redoc">
      <RedocStandalone
        spec={petStoreSpec}
        onLoaded={error => {
          if (error) {
            console.log(error);
          }
        }}
      />
    </div>
  );
};

The only warning we could see in the console is

[RomanHotsiy]

Hi, this is an issue with the scroll container. Right now Redoc supports only top-level scroll and won't work if you insert it into a scrollable container.

As a workaround, try to remove any scrollable wrapper around Redoc. Otherwise, wait for the issue to be fixed.

[rcrooks]

@annakulaachyuth in case it helps, I had the same problem and tracked it down to this property on HTML in the CSS: scroll-behavior: smooth;

[davidmweber]

This partially solves the problem. I have a fairly simple layout with redoc in a nested div and un-setting scroll-behavior does make the UI jump to the correct destination on click but the left menu scrolls away. The back button on the browser does work fine but it is not ideal. Also, it is not possible to open up specific tags. You just get taken to the top of the listings for a particular tag. I can replicate this rather easily if needed. Unfortunately, I am more of a backend Scala type and not much help with react/html.css.

[jonsage]

@annakulaachyuth in case it helps, I had the same problem and tracked it down to this property on HTML in the CSS: scroll-behavior: smooth;

Also scroll-padding: <any value> causes issues - best to unset/initial it.

[thxmike]

As a work around set the css overflow-y: scroll; property on the same container (i.e div) you have the redoc container in..
Here is an example I used.
.outer-container {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
scroll-padding: 0 !important;
scroll-behavior: unset !important;
overflow-y: scroll;
}
This corrected the problem on my page

[fekete-robert]

Issue persists in the current main branch as well.

[huanlin]

Hi,
I have written a post about this issue and how I fixed it. If you're interested, see the demo and my post: Redoc side menu woes with Bootstrap CSS 5.x.