Skip to content

Instantly share code, notes, and snippets.

@dominykas

dominykas/grid.html

Last active January 2, 2016 20:19
Show Gist options
  • Save dominykas/8355955 to your computer and use it in GitHub Desktop.
Save dominykas/8355955 to your computer and use it in GitHub Desktop.
Download ZIP
Scrolly Grid
Raw
grid.html
<html>
<head>
<title>Scrolly grid test</title>
<style>
.container {
padding: 4px;
width: 600px;
background-color: rgba(0,0,0,.1);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
overflow: hidden;
height: 156px;
}
.container-scroller {
left: 0;
position: relative;
height: 148px;
transition: left 0.1s;
-moz-column-count: 2;
-moz-column-gap: 0;
-webkit-column-count: 2;
-webkit-column-gap: 0;
column-count: 2;
column-gap: 0;
}
.container.double {
height: 304px;
}
.container.double .container-scroller {
height: 296px;
}
.item {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 4px;
height: 148px;
line-height: 140px;
text-align: center;
width: 100%;
display: inline-block;
vertical-align: top
}
.item .item-content {
background-color: rgba(0,0,0,.1);
}
.container button {
position: absolute;
top: 50%;
margin-top: -12px;
width: 24px;
height: 24px;
}
.container button.back {
left: 0;
}
.container button.forward {
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="container-scroller">
<div class="item"><div class="item-content">
1
</div></div><div class="item"><div class="item-content">
2
</div></div><div class="item"><div class="item-content">
3
</div></div><div class="item"><div class="item-content">
4
</div></div><div class="item"><div class="item-content">
5
</div></div><div class="item"><div class="item-content">
6
</div></div><div class="item"><div class="item-content">
7
</div></div><div class="item"><div class="item-content">
8
</div></div><div class="item"><div class="item-content">
9
</div></div><div class="item"><div class="item-content">
10
</div></div><div class="item"><div class="item-content">
11
</div></div><div class="item"><div class="item-content">
12
</div></div><div class="item"><div class="item-content">
13
</div></div><div class="item"><div class="item-content">
14
</div></div><div class="item"><div class="item-content">
15
</div></div><div class="item"><div class="item-content">
16
</div></div><div class="item"><div class="item-content">
17
</div></div>
</div>
<div style="clear:both"></div>
<button class="back">&lt;</button>
<button class="forward">&gt;</button>
</div>
<hr/>
<div class="container double">
<div class="container-scroller">
<div class="item"><div class="item-content">
1
</div></div><div class="item"><div class="item-content">
2
</div></div><div class="item"><div class="item-content">
3
</div></div><div class="item"><div class="item-content">
4
</div></div><div class="item"><div class="item-content">
5
</div></div><div class="item"><div class="item-content">
6
</div></div><div class="item"><div class="item-content">
7
</div></div><div class="item"><div class="item-content">
8
</div></div><div class="item"><div class="item-content">
9
</div></div><div class="item"><div class="item-content">
10
</div></div><div class="item"><div class="item-content">
11
</div></div><div class="item"><div class="item-content">
12
</div></div><div class="item"><div class="item-content">
13
</div></div><div class="item"><div class="item-content">
14
</div></div><div class="item"><div class="item-content">
15
</div></div><div class="item"><div class="item-content">
16
</div></div><div class="item"><div class="item-content">
17
</div></div>
</div>
<button class="back">&lt;</button>
<button class="forward">&gt;</button>
</div>
<script>
[].forEach.call(document.querySelectorAll('button'), function (b) {
b.addEventListener("click", function () {
var scrollArea = b.parentNode.querySelector('.container-scroller');
var viewportWidth = scrollArea.getBoundingClientRect().width;
var page = scrollArea.getAttribute('data-page') || 0;
var styles = window.getComputedStyle(scrollArea);
var visibleColumns = styles.getPropertyValue("column-count") || styles.getPropertyValue("-moz-column-count") || styles.getPropertyValue("-webkit-column-count");
var visibleRows = scrollArea.parentNode.classList.contains("double") ? 2 : 1;
var visibleItems = visibleColumns*visibleRows;
var numPages = (~~(scrollArea.children.length / visibleItems))+1;
if (b.classList.contains('back')) {
page--;
} else {
page++;
}
if (page < 0) page=0;
if (page >= numPages) page = numPages - 1;
scrollArea.setAttribute('data-page', page);
scrollArea.style.left = (-page*Math.round(viewportWidth))+"px";
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment