rapi-doc / RapiDoc

RapiDoc -WebComponent for OpenAPI Spec
https://rapidocweb.com
MIT License
1.61k stars 271 forks source link

Scroll Y Offset when scrolling to element #990

Open ImperviousPanda opened 6 months ago

ImperviousPanda commented 6 months ago

Hello, I am just starting to use rapidoc with our APIs and I am trying to add it as a page inside of our website.

Unfortunately this website has a floating scrollbar. So when a user clicks on an endpoint and rapidoc scrolls to the top of that element, the floating header is covering the element. I think what I need is a feature similar to the redoc's 'scroll-y-offset'. So when it does scroll to an element it adds an amount to that scroll position.

Does this feature exist in Rapidoc? Or is there another/better way to do this?

I saw in other git issues the suggestion is to add padding to the parent div of the redoc web element. I am doing this so that the documentation isn't covered by the header, but it still scrolls to the same place. Maybe I am doing this wrong?

Using it in React:

          <div style={{paddingTop: "150px", background: "black" }}>
            <rapi-doc
              spec-url="https://myradar-public-open-api.s3.amazonaws.com/openapi-joined.yaml"
              theme = "dark"
              primary-color = "#8d56ff"
              show-header = "false"
              font-size = "large"
              api-key-name = "Subscription-Key"
              api-key-value = "feef5fc1acfd45c8b59359c15a6622a2"
              api-key-location = "header"
              update-route = "false"
            ></rapi-doc>
          </div>

Thank you for your time!