Permalink
Fetching contributors…
Cannot retrieve contributors at this time
248 lines (220 sloc) 9.67 KB
<!doctype html>
<html>
<head>
<title>Antiscroll - os x lion style cross-browser native scrolling on the web that gets out of the way</title>
<link href="build/build.css" rel="stylesheet" />
<style>
body {
padding: 80px 100px;
font: 14px/1.4 sans-serif;
}
h1 {
font-size: 28px;
}
.box {
background: #eee;
}
.box, .box .antiscroll-inner {
width: 250px;
height: 250px;
}
.box-wrap {
margin: 20px 40px;
border: 1px solid #999;
}
.box-inner {
background: #eee;
padding: 10px;
color: #999;
text-shadow: 0 1px 0 #fff;
}
ul#features {
margin: 40px 0;
padding: 0 20px;
float: left;
width: 600px;
}
ul#features li {
list-style: none;
}
ul {
padding: 0 15px;
}
ul li {
margin: 0 5px;
padding: 3px 0;
}
.action {
color: #0069d6;
cursor: pointer;
}
.action:hover {
color: #00438a;
}
</style>
</head>
<body>
<div id="page">
<h1>Antiscroll</h1>
<p>os x lion style cross-browser native scrolling on the web that gets out of the way.</p>
<ul id="features">
<li>supports mousewheels, trackpads, other input devices natively.</li>
<li>doesn't magically autowrap your elements with divs (manual wrapping is necessary, please see index.html demo).</li>
<li>fade in/out controlled with CSS3 animations.</li>
<li>shows scrollbars upon hovering.</li>
<li>scrollbars are draggable.</li>
<li>size of container can be dynamically adjusted and scrollbars will adapt.</li>
</ul>
<div class="box-wrap antiscroll-wrap">
<div class="box">
<div class="antiscroll-inner">
<div class="box-inner">
<table>
<tr>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
</tr>
<tr>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
</tr>
<tr>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
</tr>
<tr>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
</tr>
<tr>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
</tr>
<tr>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
</tr>
<tr>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
</tr>
<tr>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
</tr>
<tr>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
</tr>
<tr>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
</tr>
<tr>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
</tr>
<tr>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
</tr>
<tr>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
</tr>
<tr>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
</tr>
<tr>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
<td>Body</td><td>Body</td><td>Body</td><td>Body</td><td>Body</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<br style="clear: both">
<br />
<p id="rows"><b>X</b> rows</p>
<ul>
<li><a class="action" id="addRow" >Add row</a></li>
<li><a class="action" id="removeRow">Remove row</a></li>
</ul>
<p id="cols"><b>X</b> cols</p>
</ul>
<li><a class="action" id="addCol" >Add col</a></li>
<li><a class="action" id="removeCol">Remove col</a></li>
</ul>
</div>
<script src="build/build.js"></script>
<script>
// window.localStorage.debug = '*';
var antiscroll = require('antiscroll');
scroller = antiscroll(document.querySelector('.box-wrap'));
function updateText() {
document.querySelector('#rows b').textContent = document.querySelectorAll('.box-wrap tr').length;
document.querySelector("#cols b").textContent = document.querySelectorAll('.box-wrap tr:last-of-type td').length;
}
document.querySelector("#addRow").addEventListener('click', function() {
document.querySelector('.box-wrap table').appendChild(document.querySelector('.box-wrap tr:last-of-type').cloneNode(true));
updateText();
scroller.refresh();
});
document.querySelector("#removeRow").addEventListener('click', function() {
var el = document.querySelector('.box-wrap tr:last-of-type');
el.parentNode.removeChild(el);
updateText();
scroller.refresh();
});
document.querySelector("#addCol").addEventListener('click', function() {
var i, els = document.querySelectorAll('.box-wrap tr');
for(i = 0; i < els.length; i++) {
els[i].appendChild(document.querySelector('td:last-of-type', els[i]).cloneNode(true));
};
updateText();
scroller.refresh();
});
document.querySelector("#removeCol").addEventListener('click', function() {
var i, els = document.querySelectorAll('.box-wrap tr td:last-of-type');
for(i = 0; i < els.length; i++) {
els[i].parentNode.removeChild(els[i]);
}
updateText();
scroller.refresh();
});
updateText();
</script>
</body>
</html>