Upgrading from v13 to v15: different content padding

[lucacervo98]

Hi, I recently updated the library from version 13.0.3 to 15.1.3 (the latest one) and noticed a change in the scrollbar content padding. Previously, I was using appearance="standard", but after the update, I switched to appearance="native", as "standard" is no longer available.

Now, regarding the vertical scrollbar: while inspecting the scrollbar in version 13, I noticed that in addition to the .ng-scroll-content class (which is also present in version 15 and applies 8px of padding to the right), there was a div with the classes ng-native-scrollbar-hider and .ng-native-scrollbar-viewport, which added an additional 8px of padding to the right. This div with these classes seems to be missing in version 15, so now I'm having 8px less of right padding for the scrollbar content.

Was this change intentional, possibly as a stylistic decision? If so, would it be possible to introduce options that allow for better configuration of the scrollbar content padding (maybe with some CSS variable overriding)?

These are the style classes that I'm using:

v.13.0.3

ng-scrollbar {
    --scrollbar-size: 8px;
    --scrollbar-hover-size: 12px;
    --scrollbar-padding: 0px;
}

v.15.1.3

ng-scrollbar {
    --scrollbar-thickness: 8;
    --scrollbar-hover-thickness: 12;
    --scrollbar-border-radius: 10px;
}

Environment

• Angular: 17.2.2
• ngx-scrollbar: 15.1.3
• Browser(s): Google Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

Thank you, Luca.

[MurhafSousli]

The additional 8px padding in v13 was wrong, and this was fixed in v14 and v15. it should mimic the native scrollbar, so when appearance is native it should reserve the width of the scrollbar by pushing the content wrapper with 8px padding.

The --scrollbar-padding is renamed to --scrollbar-offset. https://github.com/MurhafSousli/ngx-scrollbar/wiki/styling

You can now use the following CSS variables in your main styles file

:root {
    --scrollbar-thickness: 8;
    --scrollbar-hover-thickness: 12;
    --scrollbar-offset: 0;
    --scrollbar-border-radius: 10px;
}