Change Content Based On Basic Scroll Position

Details

Goal: This code shows how to trigger an event and make an update to a page with the Intersection Observer when content scrolls to a certain point.
Goal: The demonstration area contains a "ul" with several "li" children. When each child element reaches the top of the demo box the display value changes to the show the id of the "e;li"
The example below is built directly from the HTML and JavaScript code snippets that follow

EXAMPLE

item1

The curtain rose and the show was on. The birch canoe slid on the smooth planks. Glue the sheet to the dark blue background. It's easy to tell the depth of a well.
Rice is often served in round bowls. The box was thrown beside the parked truck. The source of the huge river is the clear spring.
Jazz and swing fans like fast music. The map had an X that meant nothing. Some ads serve to cheat buyers. On the islands the sea breeze is soft and mild. Add salt before you fry the egg. The houses are built of red clay bricks.
A castle built from sand fails to endure. Tack the strip of carpet to the worn floor. Pour the stew from the pot into the plate.
The drip of the rain made a pleasant sound. Smoke poured out of every crack. Much of the story makes good sense.
Drop the ashes on the worn old rug. The desk and both chairs were painted tan. Throw out the used paper cup and plate.

HTML Source

<div id="currentId">item1</div>

<div id="scrollArea">
  <ol>
    <li id="item1">
      The curtain rose and the show was on. The birch canoe slid on the smooth
      planks. Glue the sheet to the dark blue background. It's easy to tell the
      depth of a well.
    </li>
    <li id="item2">
      Rice is often served in round bowls. The box was thrown beside the parked
      truck. The source of the huge river is the clear spring.
    </li>
    <li id="item3">
      Jazz and swing fans like fast music. The map had an X that meant nothing.
      Some ads serve to cheat buyers. On the islands the sea breeze is soft and
      mild. Add salt before you fry the egg. The houses are built of red clay
      bricks.
    </li>
    <li id="item4">
      A castle built from sand fails to endure. Tack the strip of carpet to the
      worn floor. Pour the stew from the pot into the plate.
    </li>
    <li id="item5">
      The drip of the rain made a pleasant sound. Smoke poured out of every
      crack. Much of the story makes good sense.
    </li>
    <li id="item6">
      Drop the ashes on the worn old rug. The desk and both chairs were painted
      tan. Throw out the used paper cup and plate.
    </li>
  </ol>
</div>

CSS Source

:root {
  --area-height: 18rem;
  --top-padding: 1rem;
}

#scrollArea {
  border: 1px solid black;
  height: var(--area-height);
  overflow-y: auto;
  width: 22rem;
  padding-top: var(--top-padding);
}

#scrollArea li {
  padding-bottom: 4rem;
  margin: 0;
}

#scrollArea li:last-child {
  height: calc(var(--area-height) - var(--top-padding));
}

JavaScript Source

function handleIntersect(entries, observer) {
  entries.forEach((entry) => {
    if (
      entry.boundingClientRect.top < entry.rootBounds.top &&
      entry.boundingClientRect.bottom > entry.rootBounds.top
    ) {
      window.currentId.innerHTML = entry.target.id
    } else if (
      entry.boundingClientRect.top < entry.rootBounds.top &&
      entry.boundingClientRect.bottom < entry.rootBounds.top
    ) {
      window.currentId.innerHTML = entry.target.nextElementSibling.id
    }
  })
}

function createObserver() {
  const options = {
    root: window.scrollArea,
    rootMargin: '0px',
    threshold: 0,
  }
  const observer = new IntersectionObserver(handleIntersect, options)
  const els = document.getElementsByTagName('li')
  for (let i = 0; i < els.length; i++) {
    observer.observe(els[i])
  }
}

window.addEventListener('load', createObserver)

JSON Data Source

{
  "note": "Example JSON data file"
}

Config JS Source

// This file can be used to represent
// and data that should be held outside
// of the main script

const c = {
  alfa: 'bravo',
}

Notes

The last element is given a specific height so it scrolls all the way to the top of the content area
The top padding lets the switch happen just a little before the number appears at the top of the border box
The scrolling area is created by setting `overflow-y` to `audo`
The nextElementSibling call is used when the scroll is moving up since the observation is made on the element leaving the area