# Browser scrollbar, position fixed, dropdown menu, and jumps

Firstly, let's see a small problem:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1725130002256/998bea53-afb5-458f-b498-ebcb9b0a0031.gif align="center")

This is our situation:

* I am using [@radix-ui/themes](https://www.radix-ui.com/themes/docs/components/theme) for all the components;
    
* The header is fixed positioned;
    
* When the dropdown menu opens, it adds an overlay, which hides the scrollbar;
    
* So the header's width is bigger, then it moves to right a bit;
    
* If you observe it carefully, the image also moves a bit;
    

It's not a big problem, but we can fix it.

The idea is, always set the header's width to be `window width - scrollbar width`, no matter there is scrollbar or not.

But how to calculate the width of the scrollbar? Different browsers have different scrollbars.

Easy. See this:

```javascript
function getScrollbarWidth() {
  const scrollDiv = document.createElement('div');
  scrollDiv.style.width = '100px';
  scrollDiv.style.height = '100px';
  scrollDiv.style.overflow = 'scroll';
  scrollDiv.style.position = 'absolute';
  scrollDiv.style.top = '-9999px';

  document.body.appendChild(scrollDiv);
  const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
  document.body.removeChild(scrollDiv);

  return scrollbarWidth;
}
```

We show the scrollbar for a div, and the trick is, `offsetWidth` includes the bar, but `clientWidth` doesn't.

Then we can get the width without scrollbar:

```javascript
const widthWithoutScrollbar = window.innerWidth - getScrollbarWidth()
```

After we use this width for body and the fixed header, everything is as still as night:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1725132732692/8ccfe6b4-8f8a-445d-9dc3-b15b4d56a127.gif align="center")

Enjoy! And try [notenote.cc](https://notenote.cc?ref=blog-scrollbar)