Can we fix "Scroll bar width calculated incorrectly" issue from original BSL lib?

[krutoo]

Hi, i describe problem with original BSL library here:
willmcpo/body-scroll-lock#239

Can we fix that algorithm in this body-scroll-lock-upgrade?

[ialse]

I'll add that the width needs to be calculated via getComputedStyle since it's different from clientWidth. Therefore, there is a small content shift.

That is, instead of

const scrollBarGap = window.innerWidth - document.documentElement.clientWidth;

need to

const scrollBarGap = window.innerWidth - document.documentElement.getBoundingClientRect().width

As a rule, this gives a fractional number, due to which there is a minimum content shift

UPD:
Checked in Chrome, unfortunately did not work. The scroll width was calculated as 16.333, but a small shift still remained. Empirically, I calculated that the correct value is 16.666, then there is no shift. Apparently, there are some nuances of browser rendering

UPD2:

For myself, I solved the problem by setting the width of the scrollbar to exactly 16 px . Unfortunately, this is only possible for webkit browsers. But for this I had to redefine all the properties of the scrollbar:

https://stackoverflow.com/questions/9060421/css3-how-to-restore-webkit-scrollbar-property-to-the-default-scroll-bar

01-08-2023.134539.mp4

[rick-liruixin]

Yes, I will fix this feature in my recent free time @krutoo @ialse

[krutoo]

@rick-liruixin Don't you have time yet?

[rick-liruixin]

@rick-liruixin Don't you have time yet?

Sorry, I've been too busy to update. It is now complete. @krutoo @ialse