Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scroll bar width calculated incorrectly #239

Open
krutoo opened this issue Nov 11, 2021 · 3 comments
Open

Scroll bar width calculated incorrectly #239

krutoo opened this issue Nov 11, 2021 · 3 comments

Comments

@krutoo
Copy link

krutoo commented Nov 11, 2021

Hi, first of all, thanks for great library

In the source code there is a calculation of the scrollbar width

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

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

it doesn't work correctly if the body has styles min-width: 995px and page has meta:

<meta name="viewport" content="width=device-width" />

It looks like:
image

Maybe solution like in this article would be more properly:
https://javascript.info/task/scrollbar-width

// create a div with the scroll
let div = document.createElement('div');

div.style.overflowY = 'scroll';
div.style.width = '50px';
div.style.height = '50px';

// must put it in the document, otherwise sizes will be 0
document.body.append(div);
let scrollWidth = div.offsetWidth - div.clientWidth;

div.remove();

alert(scrollWidth);
@r0ughnex
Copy link

I can confirm this happens 👍

@AVL68
Copy link

AVL68 commented Dec 1, 2021

Good day! Any comments from the developers of this library?

@rick-liruixin
Copy link

They stopped the repairs. I had to do it myself, in the same way, with a new version of typeScript. And fix these problems for everyone to use. add react hooks、vue3 example

npm i body-scroll-lock-upgrade

repair log,Refer to the releases page.
@r0ughnex @krutoo @AVL68

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants