getScrollbarWidth shouldn't use unsafe styles

[kiliancs]

What is the current behavior?

With a CSP of style-src 'self', the following error or similar is logged by the browser:

Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“default-src”).

The cause is this code in getScrollbarWidth in src/util.tsx:

  el.setAttribute(
    'style',
    'position:absolute;width:100px;height:100px;top:-999px;left:-999px;overflow:scroll;'
  );

The content inside the Scrollbar component is not visible, and scrolling is not possible.

Steps to reproduce it and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have extra dependencies other than react-scrollbars-custom. Paste the link to your JSFiddle or CodeSandbox example below:

https://codesandbox.io/s/autumn-fast-n5p48h?file=/public/index.html

Basically, add the following meta tag to the HTML of your project:

    <meta
      http-equiv="Content-Security-Policy"
      content="style-src 'self'"
    />

What is the expected behavior?

No CSP violations from react-scrollbars-custom. Scrolling works.

A little about versions:

• OS: Ventura 13.3.1
• Browser (vendor and version): Firefox 118.0.1
• React: 17.0.1
• react-scrollbars-custom: 4.1.1
• Did this worked in the previous package version?: Not sure but I wouldn't expect so.