Zenscroll Addition Causes Performance Issues, Undesired Behavior

[LadyRadia]

Q&A (please complete the following information)

• OS:
• Browser: Chrome
• Version: 81
• Method of installation: npm
• Swagger-UI version: 3.25.1
• Swagger/OpenAPI version: OpenAPI 3.0

Content & configuration

Include the Swagger UI element on any SPA with href="#" elements.

Describe the bug you're encountering

When you import and initialize Swagger UI on your page, one of the libraries it includes by default is zenscroll. This dependency itself runs with the expectation it should be used with all anchors across the webpage, and so will automatically cause scrolling to/from anchor elements across your website, not just restricted to Swagger UI. When working with other components that intend to handle anchors themselves, this then causes conflicts - most recently with a component that uses its own anchors with just a href="#" tag, as that causes it to unconditionally scroll to the top of the page whenever clicked.

Using another solution to handle scrolling when selecting methods so that we can remove zenscroll, or figuring out a way to conditionally enable/disable it (vs. diving into their documentation) would be a huge help to letting Swagger UI be relatively isolated to its own content.

To reproduce...

Steps to reproduce the behavior:

1. Import Swagger UI to a default React application.
2. Create a list of anchor tags.
3. Select your anchor tag.
4. Notice that zenscroll is applying its listener to each of the tags.

Expected behavior

The Swagger UI elements will scroll appropriately when selecting elements, but will not apply to other elements.

Screenshots

Additional context or thoughts

Sorry if there is something unclear about this issue. Let me know what additional guidance I can provide!

Fwiw, if you run into this issue of automatic scrolling across your page when using Swagger UI, try adding "window.NoZensmooth = true" in your app. This will disable the behavior.

[P0TER]

Thanks. I have the same problem. window.noZensmooth = true is worked for me. It’s important to set this value before Zenscroll is executed, otherwise the handlers will be installed. So make sure the setting comes before the loading of the script

[C-Higgins]

This is still an issue. Simply by importing this component the entire site is forced into Zenscroll behavior, which is just absurd. This needs to be disabled by default. It cannot be allowed to hijack the ubiquitous behavior of clicking links across an entire app.

[jarlah]

@P0TER using this window option is A solution. But not a good solution. :/ maybe there is an option that can be passed into swagger ui bundle to disable this plugin? (disable the addition of the script element to the page)

[kmarkussen]

Yes. Default Zenscroll behavior is causing side effects throughout the rest of my React application. Major irritation