Closed FontEndArt closed 1 year ago
https://github.com/KingSora/OverlayScrollbars/issues/379 The description of the problem in v 1 seems to be somewhat helpful in understanding the problem at hand
Good day @FontEndArt
So in v2
the target element is expected to be display:flex
or display: inline-flex
. Thats a new approach I'm using to get rid of measuring containers and some tricky size calculations. This wasn't possible in v1
because of the IE8
support.
Whats your exact problem with this fact?
Internally the company is looking for a solution to replace the existing scrollbar plugin.
I used react-custom-scrollbars before, and it feels normal when I replace it with OverlayScrollbars v1.
Due to performance problems, I upgraded to v2, so now I encounter some problems that the original business scenarios are not compatible, or the height cannot be adapted, or the scroll bar cannot appear normally.
Because the containers of the original business scenario are not all flex, so I am very distressed how to solve it, or should I downgrade to v1?
Would really love to get your advice! Thanks!
@FontEndArt The fact that the target element has display: flex
shouldn't really change the behavior of anything around or inside of it. Since the children are wrapped in the viewport
anyways (the viewport is display: block
) it shouldn't affect them at all. You could just try to change the containers to be flex
.
Can you show me an example of the problems you mentioned? Namely the "height cannot be adapted" and the "scroll bar cannot appear normally" problems.
I'll try my best, because I can't reproduce the business scenario very well in the component library, it may take one to two days. Please wait patiently, thanks!
same issue
@mrold Are you able to provide an example where display: flex
is undesired and is affecting your layout?
Difficult to reproduce after leaving company I'll temporarily close this question until I fully reproduce it in a demo and open it again!
@KingSora
This won't scroll anyway unless the parent element adds the css style: display:flex
My tools: Vite
and React
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
import 'overlayscrollbars/overlayscrollbars.css';
export default function App () {
return (
<div style={{width: 300, height: 500, margin: '50px auto', border: "solid 1px #ccc", boxSizing: "border-box"}}>
<OverlayScrollbarsComponent defer>
<div style={{ height: 1000, background: 'green'}}>
this is a long list
</div>
</OverlayScrollbarsComponent>
</div>
);
}
@KingSora One obvious example I'm having is when the scrollable element itself is flex-grow: 1
and there's a click listener attached that checks if user clicked on empty space (event.target === scrollable
). This check never works under OverlayScrollbars.
I have opened #540.
@szmarczak Your issue seems to be related to the fact that the plugin is wrapping your content in general and not to the display: flex
of the host element.
Question & Expected behavior It is expected to be used correctly without caring about the style of the parent element, and it is expected to have the same effect as
sizeAutoCapable
1 in v 1 in various flex.Now, my parent dom style must be display flex overlay scrollbars v 2 to work!
Examples Part looks like this, and And in some scenarios, the width or height of the viewport will be 0:
Environment
Additional context Add any other context about the problem here.