JSFiddle - React, Tailwind, and code Playground

by Pankaj Kargirwar

HTML

<div>

  <?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" width="1440" height="8146.285025711" viewBox="0 0 47.8006 270.4148" preserveAspectRatio="xMidYMin">
    <style type="text/css">
      <![CDATA[
      tspan {
        white-space: pre;
      }

      ]]>
    </style>
    <g transform="translate(10.6459, 4.5051)"><text x="0" y="0" style="font-family: serif; font-weight: bold; font-size: 3.4926px; text-anchor: start; fill: currentColor">
        <tspan>Nile gagan ke tale</tspan>

      </text>
    </g>
    <g transform="translate(41.3589, 8.0051)"><text x="0" y="0" style="font-family: serif; font-size: 2.2002px; text-anchor: start; fill: currentColor">
        <tspan>Ravi</tspan>
      </text>

    </g>
    <g transform="translate(5.6906, 13.7320)">
      <line x1="0.0303" y1="0" x2="39.8036" y2="0" style="stroke-linejoin: round; stroke-linecap: round; stroke-width: 0.0606; stroke: currentColor" />
    </g>
    <g transform="translate(45.4093, 13.7320)">
      <rect x="0.0000" y="-1.0303" width="0.1151" height="2.0606" ry="0.0000" style="fill: currentColor" />

    </g><a xlink:href="textedit:///Users/pankaj/Downloads/songs/nile-gagan-ke-tale/out/rhythmic/stanza-temp.ly:8:17:18" style="color: inherit">
      <g transform="translate(40.9600, 13.7320)">
        <path d="M0.7303 1.0000C1.4544 1.7195 3.5251 1.7195 4.2493 1.0000L4.2493 1.0000C3.5251 1.6468 1.4544 1.6468 0.7303 1.0000z" style="stroke-width: 0.0485; stroke-linejoin: round; stroke-linecap: round; stroke: currentColor; fill: currentColor" />

      </g>
    </a><a xlink:href="textedit:///Users/pankaj/Downloads/songs/nile-gagan-ke-tale/out/rhythmic/stanza-temp.ly:2:0:1" style="color: inherit">
      <g transform="translate(10.4041, 13.7320)">
        <path transform="scale(0.0040, -0.0040)" d="M-4 79c0 59 125 82 125 181c0 24 -8 47 -24 67l-39 46c-2 3 -3 6 -3 9c0 7 7 14 14 14c3 0 7 -1 10 -5l152 -182c7 -8 10 -17 10 -25c0...

CSS

div {
  width:100%;
  height:100%;
  overflow: scroll;
}

JavaScript

let observer = new IntersectionObserver((entries, opts) => {
  entries.forEach((entry) => {
    console.log(entry.target.id);
  });

}, {
//  root: document.getElementById('container'),
  threshold: [0.1, 0.25, 0.5, 0.75, 1.0]
})

observer.observe(document.querySelector('.pitch-0'));