Skip to content

Instantly share code, notes, and snippets.

@smagch

smagch/index.html

Created August 28, 2018 05:16
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save smagch/6815e01a76bddc79b3e529bd7bee1e07 to your computer and use it in GitHub Desktop.
Save smagch/6815e01a76bddc79b3e529bd7bee1e07 to your computer and use it in GitHub Desktop.
Download ZIP
horizontal scroll testing: Intersection Observer API
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
.h-container {
position: absolute;
left: 0;
right: 0;
top: 100px;
height: 300px;
overflow : hidden;
}
.box {
overflow: scroll;
white-space: nowrap;
}
.box > * {
width: calc((100% - 16px) / 3);
margin-right: 8px;
display: inline-block;
height: 300px;
}
.box > *:first-child {
margin-left: 8px;
}
</style>
</head>
<body>
<h1>test for tile navigation</h1>
<div class="h-container">
<div class="box">
<div class="item" style="background: tomato;">1</div>
<div class="item" style="background: skyblue;">2</div>
<div class="item" style="background: paleturquoise;">3</div>
<div class="item" style="background: gray;">4</div>
<div class="item" style="background: pink;">5</div>
<div class="item" style="background: aquamarine;">6</div>
</div>
</div>
<button id="left" type="button">left</button>
<button id="right" type="button">right</button>
<script>
const options = {
root: document.querySelector('.box'),
rootMargin: '0px',
threshold: 0
};
const observer = new IntersectionObserver(callback, options);
function callback (entries) {
console.log('entries.length: ', entries.length, '----');
entries.forEach(entry => {
console.log('entry: ', entry.target.textContent, entry.isIntersecting);
});
}
document.querySelectorAll('.item').forEach(item => {
observer.observe(item);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment