Skip to content

Instantly share code, notes, and snippets.

@michalczukm

michalczukm/intersection-observer-example.html

Created May 17, 2020 17:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save michalczukm/9903bbbc4d58b20b81ac7f103b98300d to your computer and use it in GitHub Desktop.
Save michalczukm/9903bbbc4d58b20b81ac7f103b98300d to your computer and use it in GitHub Desktop.
Download ZIP
Example of Intersection Observer usage
Raw
intersection-observer-example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item {
background: #FFF;
border: 1px solid #666;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
#scroller {
height: 400px;
overflow-y: scroll;
}
</style>
</head>
<body>
<div>
<ul>
<li id="menu-1">menu 1</li>
<li id="menu-20">menu 2</li>
</ul>
</div>
<div id="content">
<div id="scroller">
<div class="item" id="item-1">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
<div class="item">Item 13</div>
<div class="item">Item 14</div>
<div class="item">Item 15</div>
<div class="item">Item 16</div>
<div class="item">Item 17</div>
<div class="item">Item 18</div>
<div class="item">Item 19</div>
<div class="item" id="item-20">Item 20</div>
<div class="item">Item 21</div>
<div class="item">Item 22</div>
<div class="item">Item 23</div>
<div class="item">Item 24</div>
<div class="item">Item 25</div>
<div class="item">Item 26</div>
<div class="item">Item 27</div>
<div class="item">Item 28</div>
<div class="item">Item 29</div>
<div class="item">Item 30</div>
</div>
</div>
</body>
<script>
const dictionary = {
"item-1": document.getElementById("menu-1"),
"item-20": document.getElementById("menu-20"),
};
const intersectionObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
const itemId = entry.target.id; // item-1
if (entry.intersectionRatio > 0) {
dictionary[itemId].style.backgroundColor = "red";
} else {
dictionary[itemId].style.backgroundColor = "";
}
});
});
document
.querySelectorAll(Object.keys(dictionary).map(key => `#${key}`).join())
.forEach((element) => intersectionObserver.observe(element));
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment