Chrome that does not scroll

A fixed Share button whose hole stays put while the page scrolls, a fixed badge a transform took back into the page whose hole rides with it, and a scroll lock pressed mid-step.

The story

const story = {
  id: 'fixed-chrome',
  steps: [
    {
      id: 'bar',
      target: '[data-share]',
      message:
        'Scroll the page. The bar stays where it is, and so does the hole: ' +
        'a fixed target gets a scrim that is fixed too, and nothing runs ' +
        'while you scroll.',
    },
    {
      id: 'badge',
      target: '[data-badge]',
      message:
        'This badge says position: fixed too, and the transform on its ' +
        'card took that away — it rides the page now. Scroll: the hole ' +
        'rides with it. The engine is asked which of the two an element ' +
        'is, not the stylesheet.',
    },
    {
      id: 'gutter',
      // Open, because the point of the step is what happens when it is
      // pressed. The strip at the right edge is not, and that is the
      // difference the step is about.
      target: { elements: '[data-lock]', interactive: true },
      message:
        'Press this. The page stops scrolling, the way it would under a ' +
        'modal, and where the scrollbars are the kind that take space its ' +
        'scrollbar goes with it — no resize event fires for that. Try ' +
        'clicking the strip at the right edge, where the scrollbar was: ' +
        'the layer is sized past the layout viewport, so it still covers ' +
        'the gutter and the click lands on nothing.',
    },
  ],
} satisfies LekoStory

The page's own scroll lock

// A scroll lock, the way an application does one for a modal — and what
// takes the document scrollbar away. Application behaviour, and it says
// nothing about a tour: the step that opens this button is the story's
// business, not the button's.
const lock = bar.querySelector('[data-lock]')!
lock.addEventListener('click', () => {
  const locked = document.documentElement.style.overflow === 'hidden'
  document.documentElement.style.overflow = locked ? '' : 'hidden'
  lock.textContent = locked ? 'Lock page scroll' : 'Unlock page scroll'
})