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.71k stars 215 forks source link

Scrolling to the bottom of the scroll bar and remov children will not recalculate the height。 #651

Closed xyhxx closed 1 month ago

xyhxx commented 1 month ago

Describe the bug Scrolling to the bottom of the scroll bar and remov children will not recalculate the height。

To Reproduce

  1. Scroll to the bottom
  2. Click element to show item
  3. Scroll to the bottom again
  4. Click element to remove item
  5. There will be space left at the bottom

Expected behavior Recalculate height, display last element without spacing at the bottom

Examples https://stackblitz.com/edit/vitejs-vite-tpuowe?file=package.json,src%2FApp.tsx,src%2Fmain.tsx,src%2FApp.css

Environment

Sorry, my English is not good and I may not be able to help you understand the problem, so I have a video.

I hope you can give me some help. Thank you.

https://github.com/KingSora/OverlayScrollbars/assets/51938216/3b6acbb7-02c8-44f5-88e6-b093f964bf12

KingSora commented 1 month ago

Good day @xyhxx :)

The reason this is happening is because the plugin is initialized in the wrong way. Youre using the same element for the target and the viewport. This combination is only valid in certain usecases and this is not one of these...

I would recommend you to use the overlayscrollbars-react package and the OverlayScrollbarsComponent if you use react: https://stackblitz.com/edit/vitejs-vite-ekohcm?file=src%2FApp.tsx this will not have such issues

xyhxx commented 1 month ago

@KingSora

Thank you.

I modified it based on overlayscrollbars-react, I added a div package and registered it in {elements: {content}}.It's perfect now