q and ! with help text autoscroll

by Alex

HTML

<h3 class="font-serif m-4 font-black shadow-lg">
  Ein Header mit ein wenig inhalt...
</h3>
<div class="grid grid-cols-2  h-[66vh]">
  <div id="left" class="w-full overflow-y-auto ring-1">
    <div class="q-block bg-amber-100 p-4" data-index="0">Frage A1</div>
    <div class="q-block bg-amber-200 p-4" data-index="1">Frage A2</div>
    <div class="q-block bg-amber-300 p-4" data-index="2">Frage A3</div>
    <div class="q-block bg-amber-400 p-4" data-index="3">Frage A4</div>
    <!-- usw. -->
  </div>
  <div id="right" class="w-full overflow-y-hidden ring-1">
    <div class="h-screen"></div>
    <div class="help-block bg-teal-100 p-4" data-index="0">
      I'm baby pBR&B migas williamsburg freegan mlkshk flexitarian ennui.
      Disrupt yuccie schlitz authentic flannel adaptogen echo park. Pop-up yes
      plz trust fund man bun bruh copper mug gluten-free health goth
      post-ironic. Big mood paleo put a bird on it next level slow-carb
      listicle, tilde blue bottle gorpcore succulents organic gastropub photo
      booth you probably haven't heard of them pok pok.
    </div>
    <div class="help-block bg-teal-200 p-4" data-index="1">
      Plaid vegan unicorn, vape banh mi coloring book schlitz hot chicken pok
      pok green juice heirloom taiyaki. Chicharrones meditation typewriter
      neutra meh.
    </div>
    <div class="help-block bg-teal-300 p-4" data-index="2">
      Neutral milk hotel tumblr godard disrupt cray heirloom kombucha. XOXO
      readymade before they sold out trust fund lyft typewriter Brooklyn
      whatever pinterest blackbird spyplane polaroid stumptown neutral milk
      hotel.
    </div>
    <div class="help-block bg-teal-400 p-4" data-index="3">
      I'm baby pBR&B migas williamsburg freegan mlkshk flexitarian ennui.
      Disrupt yuccie schlitz authentic flannel adaptogen echo park. Pop-up yes
      plz trust fund man bun bruh copper mug gluten-free health goth
      post-ironic. Big mood paleo put a bird on it next level...

Tailwind CSS

body{
  @apply overflow-hidden m-0 p-0 
}

JavaScript

const left = document.getElementById('left');
const right = document.getElementById('right');

document.querySelectorAll('.q-block').forEach(el => {
  el.addEventListener('mouseenter', () => {
    const index = el.dataset.index;
    const helpEl = document.querySelector(`.help-block[data-index="${index}"]`);

    if (helpEl) {
      // Position des Frage-Elements relativ zu seinem Scroll-Container
      const topOffset = el.offsetTop - left.scrollTop;

      // Scroll-Rechts so, dass Hilfetext an genau dieser Stelle landet
      right.scrollTo({
        top: helpEl.offsetTop - topOffset,
        behavior: 'smooth',
      });
    }
  });
});