# Scrollbar width custom event

DevFeed: [Scrollbar width custom event](<https://devfeed.tech/articles/scrollbar-width-custom-event-37346.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/scrollbar-size-observer/>)

Author: Stanko

Published: 2023-06-19T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [browser](<https://devfeed.tech/topics/browser.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [demo](<https://devfeed.tech/tags/demo.md>), [developers](<https://devfeed.tech/tags/developers.md>), [example](<https://devfeed.tech/tags/example.md>), [examples](<https://devfeed.tech/tags/examples.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [layout](<https://devfeed.tech/tags/layout.md>), [live](<https://devfeed.tech/tags/live.md>), [load](<https://devfeed.tech/tags/load.md>), [prevent](<https://devfeed.tech/tags/prevent.md>), [stack-overflow](<https://devfeed.tech/tags/stack-overflow.md>), [value](<https://devfeed.tech/tags/value.md>), [variable](<https://devfeed.tech/tags/variable.md>)

## AI overview

This tutorial explains scrollbar-related layout issues and shows how to create a custom JavaScript event that detects changes in scrollbar width using ResizeObserver. It also covers initializing a CSS variable early to reduce layout shift and briefly mentions a CSS alternative.

## Source excerpt

Some operating systems and browsers are not showing scrollbars by default. That often results in developers forgetting about these pesky gray bars and the issues they can cause. I'll give you two quick examples: When setting overflow: hidden on the body element, if there was a scrollbar visible, content will jump a little as it now has more space. If you ever implemented scroll locking for modals, you've probably encountered this issue. Another thing is that width: 100vw and width: 100% on the body element don't match if there is a scrollbar visible: 100vw is the width of the viewport including the scrollbar. 100% is the width of the viewport excluding the scrollbar. This becomes obvious if you have a fixed element like a header. It will be a little bit wider than the rest of the content when scrollbar is visible. I'm sure there are more issues, but these are the two I remembered on top of my head. Anyhow, let's see how to solve this. JavaScript solution # Ideally we would like to have a scrollbar-width event. It doesn't exist, so we'll have to create a custom event ourselves, and trigger it when scrollbar width changes. To catch the width changing, we can't use the resize event because viewport size don't change when scrollbar is toggled. However, if we set the ResizeObserver on the html element, it will trigger when the scrollbar is toggled. Code # After setting the observer we need to fire our custom event when width has changed. Code looks something like this: const initScrollbarWidthEvent = () => { // Custom event const scrollbarEvent = new Event("scrollbar-width"); // Initial state let currentWidth = window.innerWidth - document.documentElement.clientWidth; const observer = new ResizeObserver(() => { const newWidth = window.innerWidth - document.documentElement.clientWidth; // Check if the scrollbar width has changed and trigger the custom event if (newWidth !== currentWidth) { // Update event data // We are passing both previous and current width, // because