Skip to content

Instantly share code, notes, and snippets.

/antiscroll-resize

Created April 29, 2012 00:38
Show Gist options
  • Save anonymous/2522897 to your computer and use it in GitHub Desktop.
Save anonymous/2522897 to your computer and use it in GitHub Desktop.
Download ZIP
Demonstration of window resize issues
Raw
antiscroll-resize
<!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="antiscroll.css" rel="stylesheet" />
<style>
html {
height:100%;
}
body {
margin:0;
height:100%;
font: 14px/1.4 'helvetica neue', helvetica, arial, sans-serif;
}
h1 {
font-size: 28px;
}
.box {
background: #eee;
}
.box, .box .antiscroll-inner {
width: 250px;
height: 100%;
font: 14px Helvetica, Arial;
}
.box-wrap {
height:100%;
}
.box-inner {
background: #eee;
padding: 10px;
color: #999;
text-shadow: 0 1px 0 #fff;
}
.box-inner table {
height:2000px;
}
.button {
-webkit-user-select: none;
display: block;
background: #3b88d8;
text-decoration: none;
background: -o-linear-gradient(0% 100% 90deg, #377ad0, #52a8e8);
background: -moz-linear-gradient(0% 100% 90deg, #377ad0, #52a8e8);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52a8e8), to(#377ad0));
border-top: 1px solid #4081af;
border-right: 1px solid #2e69a3;
border-bottom: 1px solid #20559a;
border-left: 1px solid #2e69a3;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
-moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
color: #fff;
font-family: "lucida grande", sans-serif;
font-size: 11px;
font-weight: normal;
line-height: 1;
padding: 3px 0 5px 0;
text-align: center;
text-shadow: 0 -1px 1px #3275bc;
width: 112px;
-webkit-background-clip: padding-box;
}
.button:hover {
background: #2a81d7;
background: -o-linear-gradient(0% 100% 90deg, #206bcb, #3e9ee5);
background: -moz-linear-gradient(0% 100% 90deg, #206bcb, #3e9ee5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3e9ee5), to(#206bcb));
border-top: 1px solid #2a73a6;
border-right: 1px solid #165899;
border-bottom: 1px solid #07428f;
border-left: 1px solid #165899;
-moz-box-shadow: inset 0 1px 0 0 #62b1e9;
-webkit-box-shadow: inset 0 1px 0 0 #62b1e9;
cursor: pointer;
text-shadow: 0 -1px 1px #1d62ab;
-webkit-background-clip: padding-box;
text-decoration: none;
}
.button:active {
background: #3282d3;
border: 1px solid #154c8c;
border-bottom: 1px solid #0e408e;
-moz-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
-webkit-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
text-shadow: 0 -1px 1px #2361a4;
-webkit-background-clip: padding-box;
}
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>
<script src="deps/jquery.js"></script>
<script src="deps/jquery-mousewheel.js"></script>
<script src="antiscroll.js"></script>
<script>
$(function () {
scroller = $('.box-wrap').antiscroll().data('antiscroll');
$(window).resize(function() {
// works but scrollbars get removed
scroller.rebuild();
// refreshes scoller but doesn't change size of inner
//scroller.refresh();
// works but the scroll range isn't updated
//$('.box-wrap').antiscroll();
});
});
</script>
</head>
<body>
<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>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment