scrollbars aren't aligned with child component edges.

[yanivfl]

Hi,
I want the ability to add props that will change scrollbar positioning or change the default values.
What I want is TrackY to reach the top of the div and TrackX to reach left edge of div.
looking at the CSS, it gets the following default values:

TrackY: {
height: calc(100% - 20px);
top: 10px;
}

TrackX: {
width: calc(100% - 20px);
left: 10px;
}

i can change this via CSS, but then library calculations may fail.
for example change TrackX:
{
width: calc(100% - 10px);
left: 0;
}

you can see this in the demo as well.

• Browser (vendor and version): all
• React: 16.13.1
• react-scrollbars-custom: 4.0.25

[yanivfl]

solved:
const trackYHeight = 'calc(100% - 10px)'
const trackXHeight = 'calc(100% - 10px)'
<Scrollbars
style={{ width: '100%', height: '100%' }}
onUpdate={scrollUpdate}
thumbYProps={{ className: styles.thumbY }}
trackYProps={{ className: styles.trackY, style: { height: trackYHeight, top: 0 } }}
thumbXProps={{ className: styles.thumbX }}
trackXProps={{ className: styles.trackX, style: { width: trackXWidth, left: 0 } }}
{...resProps}
>
{children}