Function handleHash

package/example/src/hooks/useActiveScrollElement.ts:119–163

* Detect clicks on hash links to set the active item. * We do this manually instead of using the `hashchange` event, because * clicking on a link that matches the current hash doesn't fire the event, * but we still want to update the active item.

(e: MouseEvent)

     * but we still want to update the active item.
     */
    function handleHash(e: MouseEvent) {
      const target = e.target as HTMLElement | null;

      if (!target) {
        return;
      }

      const anchorElement = target.closest('a');
      const href = anchorElement?.getAttribute('href');

      if (!anchorElement || !href || !href.startsWith('#')) {
        return;
      }

      const hash = href?.slice(1);

      // Ignore hash links that don't match the ids we're tracking
      if (!ids.includes(hash)) {
        return;
      }

      // Immediately set active
      setActive(hash);

      // Pause updates caused by scrolling or intersection observer for a short time
      updatesPaused.current = true;

      if (hasScrollEnd) {
        // Use the scrollend event when supported
        document.addEventListener(
          'scrollend',
          () => {
            updatesPaused.current = false;
          },
          { once: true },
        );
      } else {
        clearTimeout(timer);
        // If smooth scroll is enabled, use a longer timeout
        const ms = rootStyle.scrollBehavior === 'smooth' ? 1000 : 60;
        timer = setTimeout(() => {
          updatesPaused.current = false;
        }, ms);
      }
    }

    const handleResize = debounce(() => {
      maxScroll =