Skip to content

Instantly share code, notes, and snippets.

@pguerrant

pguerrant/scroll-snap.html

Created July 19, 2016 14:16
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 pguerrant/ab2a1bffa95bad930ebbf2592cfd08f2 to your computer and use it in GitHub Desktop.
Save pguerrant/ab2a1bffa95bad930ebbf2592cfd08f2 to your computer and use it in GitHub Desktop.
Download ZIP
Scroll Snapping
Raw
scroll-snap.html
<!DOCTYPE html>
<html>
<head>
<title>Scroll Snap Demo</title>
</head>
<body>
<style>
body {
font: 13px helvetica;
}
* {
box-sizing: border-box;
}
#wrap {
display: table;
height: 202px;
width: 202px;
position: relative;
border: 1px solid green;
}
#container {
height: 200px;
width: 200px;
overflow: auto;
-webkit-overflow-scrolling: touch;
-ms-scroll-snap-type: mandatory;
-webkit-scroll-snap-type: mandatory;
scroll-snap-type: mandatory;
-ms-scroll-snap-points-y: snapInterval(0px, 40px);
/*scroll-snap-padding: 80px 0 0;*/
position: relative;
}
.item {
height: 40px;
line-height: 40px;
text-align: center;
border-bottom: 1px solid gray;
-ms-scroll-snap-coordinate: 0 -80px;
-webkit-scroll-snap-coordinate: 0 -80px;
scroll-snap-coordinate: 0 -80px;
/*-webkit-scroll-snap-align: none start;*/
/*scroll-snap-align: none start;*/
}
.item:first-child {
margin-top: 80px;
}
.item:last-child {
margin-bottom: 80px;
}
#mask {
height: 40px;
width: 100%;
position: absolute;
top: 81px;
left: 0;
background: #000;
opacity: .1
}
</style>
<div id="wrap">
<div id="container">
<!--<div style="position:relative;">-->
<div class="item">12:00</div>
<!--<div class="item" style="height: 70px">12:15</div>-->
<!--<div class="item" style="height: 20px">12:30</div>-->
<!--<div class="item" style="height: 60px">12:45</div>-->
<div class="item">1:00</div>
<div class="item">1:15</div>
<div class="item">1:30</div>
<div class="item">1:45</div>
<div class="item">2:00</div>
<div class="item">2:15</div>
<div class="item">2:30</div>
<div class="item">2:45</div>
<div class="item">3:00</div>
<div class="item">3:15</div>
<div class="item">3:30</div>
<div class="item">3:45</div>
<div class="item">4:00</div>
<div class="item">4:15</div>
<div class="item">4:30</div>
<div class="item">4:45</div>
<div class="item">5:00</div>
<div class="item">5:15</div>
<div class="item">5:30</div>
<div class="item">5:45</div>
<div class="item">6:00</div>
<div class="item">6:15</div>
<div class="item">6:30</div>
<div class="item">6:45</div>
<div class="item">7:00</div>
<div class="item">7:15</div>
<div class="item">7:30</div>
<div class="item">7:45</div>
<div class="item">8:00</div>
<div class="item">8:15</div>
<div class="item">8:30</div>
<div class="item">8:45</div>
<div class="item">9:00</div>
<div class="item">9:15</div>
<div class="item">9:30</div>
<div class="item">9:45</div>
<div class="item">10:00</div>
<div class="item">10:15</div>
<div class="item">10:30</div>
<div class="item">10:45</div>
<div class="item">11:00</div>
<div class="item">11:15</div>
<div class="item">11:30</div>
<div class="item">11:45</div>
<!--</div>-->
</div>
<div id="mask"></div>
</div>
<script>
window.onload = function() {
return;
var container = document.getElementById('container'),
lastScrollTime = 0,
lastScrollTop = container.scrollTop,
skipNextScroll = false,
snapThreshold = 100,
slotSize = 80,
snapTimeout, distance;
function snap() {
var overscroll = container.scrollTop % slotSize;
skipNextScroll = true;
if (distance < 0) {
container.scrollTop -= overscroll;
} else {
container.scrollTop += (slotSize - overscroll);
}
lastScrollTime = 0;
distance = null;
clearTimeout(snapTimeout);
}
container.addEventListener('scroll', function() {
var now = +new Date(),
timeSinceLastScroll = now - lastScrollTime,
scrollTop = container.scrollTop;
if (skipNextScroll) {
skipNextScroll = false;
return;
}
distance = scrollTop - lastScrollTop;
if (!lastScrollTime || (timeSinceLastScroll < snapThreshold)) {
clearTimeout(snapTimeout);
snapTimeout = setTimeout(snap, snapThreshold - timeSinceLastScroll);
} else {
snap();
}
lastScrollTime = now;
lastScrollTop = scrollTop;
});
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment