test intersectionobserver

by hyeyoon

HTML

<div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, tempore.</p>
  </div>
  <button>test</button>
  <h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. In illum culpa doloremque explicabo, itaque dolorem molestias iste totam dolores quos debitis molestiae, accusantium quia nam numquam placeat obcaecati delectus suscipit.
  </h2>
    <h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. In illum culpa doloremque explicabo, itaque dolorem molestias iste totam dolores quos debitis molestiae, accusantium quia nam numquam placeat obcaecati delectus suscipit.
  </h2>
  <h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. In illum culpa doloremque explicabo, itaque dolorem molestias iste totam dolores quos debitis molestiae, accusantium quia nam numquam placeat obcaecati delectus suscipit.
  </h2>
  <h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. In illum culpa doloremque explicabo, itaque dolorem molestias iste totam dolores quos debitis molestiae, accusantium quia nam numquam placeat obcaecati delectus suscipit.
  </h2>
  <h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. In illum culpa doloremque explicabo, itaque dolorem molestias iste totam dolores quos debitis molestiae, accusantium quia nam numquam placeat obcaecati delectus suscipit.
  </h2>
  <h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. In illum culpa doloremque explicabo, itaque dolorem molestias iste totam dolores quos debitis molestiae, accusantium quia nam numquam placeat obcaecati delectus suscipit.
  </h2>
    <h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. In illum culpa doloremque explicabo, itaque dolorem molestias iste totam dolores quos debitis molestiae, accusantium quia nam numquam placeat obcaecati delectus suscipit.
  </h2>
</div>

SASS

button 
  display: block
  width: 50%
  background: skyblue
  border: 1px solid red
h2
  font-size: 15px
  color: #aaa

JavaScript

const io = new IntersectionObserver((entries, observer) => {
	entries.forEach(entry => {
  	console.log('entry.intersectionRatio', entry.intersectionRatio)
    console.log('entry.isIntersecting', entry.isIntersecting)
  })
})

const buttons = document.querySelectorAll('button');

buttons.forEach((el) => {
	io.observe(el);
})