search

KingSora / OverlayScrollbars

A javascript scrollbar plugin that hides the native scrollbars, provides custom styleable overlay scrollbars, and preserves the native functionality and feel.
https://kingsora.github.io/OverlayScrollbars
MIT License
3.9k stars 215 forks source link

Scrollbars Overlapping #667

Closed rafawashere1 closed 3 months ago

rafawashere1 commented 3 months ago

Describe the bug When parent and child containers have the same size and both have scrollbars, OverlayScrollbars tends to overlap the scrollbars instead of positioning them side-by-side.

image

To Reproduce

  1. Create a parent container with overflow content.
  2. Inside the parent container, create a child container with its own overflow content, ensuring both containers have the same size.
  3. Apply OverlayScrollbars directive to both the parent and child containers with their respective options.
  4. Trigger overflow in both containers to show the scrollbars.
  5. Observe that the scrollbars overlap instead of positioning side-by-side.

Expected behavior The scrollbars should be positioned side-by-side, rather than overlapping each other. For example, when I combined OverlayScrollbars with the native scrollbar from the browser, the expected behavior was achieved:

image

Code Example

<div class="parent-container" overlay-scrollbars [options]="parentScrollbarOptions">
  <!-- Parent content that overflows -->
  <div class="child-container" overlay-scrollbars [options]="childScrollbarOptions">
    <!-- Child content that overflows -->
  </div>
</div>

Additional context I'm using these versions:

"overlayscrollbars": "~2.9.2" "overlayscrollbars-ngx": "~0.5.1"

and I'm using the OverlayScrollbars directive.

KingSora commented 3 months ago

Good day @rafawashere1

This is a consequence of overlaid scrollbars.. Since scrollbars are overlaid over the content you can run into this issue on native platforms as well. This is an example of the elements arrangement you described: https://jsfiddle.net/c3dofszk/ Viewing this on macOS or any other OS with natively overlaid scrollbars will have overlapping scrollbars. I would say its up to you as a developer to ensure this doesn't happen..