https://jimbo.lol/assets/controllers/scrollbar_gutter_controller-9…92514f0a2eef509f5a4543c6dde19c6a8378a5f4.js

1import { Controller } from "@hotwired/stimulus"
2
3// 100vw includes the page's vertical scrollbar, so full-bleed blocks sized with it overflow
4// sideways. Publishes the scrollbar's width as --scrollbar-gutter-width for CSS to subtract.
5// The root resizes whenever the scrollbar appears or disappears, so observing it keeps the
6// value current.
7export default class extends Controller {
8  connect() {
9    this.observer = new ResizeObserver(() => this.#publishGutterWidth())
10    this.observer.observe(document.documentElement)
11  }
12
13  disconnect() {
14    this.observer.disconnect()
15    document.documentElement.style.removeProperty("--scrollbar-gutter-width")
16  }
17
18  #publishGutterWidth() {
19    const gutterWidth = window.innerWidth - document.documentElement.clientWidth
20    document.documentElement.style.setProperty("--scrollbar-gutter-width", `${gutterWidth}px`)
21  }
22};