Last active
August 28, 2025 14:49
-
-
Save alamindevms/ee0b4cd8659607987d788d5f3e561bc7 to your computer and use it in GitHub Desktop.
IntersectionObserver Web API
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>IntersectionObserver Web API</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| h1 { | |
| text-align: center; | |
| margin: 20px 0; | |
| } | |
| .box { | |
| width: 80%; | |
| height: 200px; | |
| margin: 20px auto; | |
| background-color: lightgray; | |
| border: 2px solid #333; | |
| font-size: 24px; | |
| } | |
| .box-1 { | |
| background-color: #f8b400; | |
| } | |
| .box-2 { | |
| background-color: #6a2c70; | |
| } | |
| .box-3 { | |
| background-color: #b83b5e; | |
| } | |
| .box-4 { | |
| background-color: #0b4f6c; | |
| } | |
| .box-5 { | |
| background-color: #01baef; | |
| height: auto; | |
| } | |
| #bottomArea { | |
| background-color: #333; | |
| color: white; | |
| font-size: 20px; | |
| } | |
| .post { | |
| border: 1px solid #fff; | |
| margin: 10px; | |
| padding: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Observer Web API</h1> | |
| <div id="bottomArea"> | |
| <div class="box box-1"> | |
| <p>Box 1</p> | |
| </div> | |
| <div class="box box-2"> | |
| <p>Box 2</p> | |
| </div> | |
| <div class="box box-3"> | |
| <p>Box 3</p> | |
| </div> | |
| <div class="box box-4"> | |
| <p>Box 4</p> | |
| </div> | |
| <div class="box box-5" id="posts"> | |
| <p>Loading...</p> | |
| </div> | |
| </div> | |
| </body> | |
| <script> | |
| const fetchPosts = async () => { | |
| try { | |
| const response = await fetch("https://jsonplaceholder.typicode.com/posts") | |
| const data = await response.json() | |
| const postsContainer = document.getElementById("posts") | |
| postsContainer.innerHTML = "" | |
| data.forEach((post) => { | |
| const postElement = document.createElement("div") | |
| postElement.classList.add("post") | |
| postElement.innerHTML = `<h3>${post.title}</h3><p>${post.body}</p>` | |
| postsContainer.appendChild(postElement) | |
| }) | |
| } catch (err) { | |
| console.log({err}) | |
| } | |
| } | |
| const observerCb = (entries, observer) => { | |
| entries.forEach((entry) => { | |
| // check | |
| if (entry.isIntersecting) { | |
| // call target API | |
| fetchPosts() | |
| observer.unobserve(entry.target) | |
| } | |
| }) | |
| } | |
| const options = { | |
| root: null, | |
| rootMargin: "0px", | |
| threshold: 0.5, // 50% of box-5 visible | |
| } | |
| const observer = new IntersectionObserver(observerCb, options) | |
| observer.observe(document.querySelector(".box-5")) | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment