Skip to content

Instantly share code, notes, and snippets.

@arbalest

arbalest/iscroll_5_fixed_sidebar.html

Last active August 29, 2015 14:04
Show Gist options
  • Save arbalest/500854546bf096bba8b3 to your computer and use it in GitHub Desktop.
Save arbalest/500854546bf096bba8b3 to your computer and use it in GitHub Desktop.
Download ZIP
iScroll 5 Fixed Sidebar Basic Template
Raw
iscroll_5_fixed_sidebar.html
<!doctype html>
<html>
<head>
<title>iScroll Fixed Sidebar Template</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.1/iscroll-min.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
box-sizing: border-box;
height: 100%;
}
.default_theme {
font-family: sans-serif;
background-color: #fafafa;
}
.app__sidebar {
width: 250px;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
background-color: #3a3a3a;
color: #fdfdfd;
}
/* Fallback without iScroll */
#iscroll-container {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 250px;
padding-left: 20px;
width: calc(100% - 270px); /* Full width - sidebar and padding */
-webkit-transform: translateZ(0);
overflow: scroll; /* Start with overflow scroll for browsers not loading iScroll, then change to 'hidden' when using iScroll */
}
</style>
</head>
<body onload="loaded()">
<div class="app default_theme">
<div class="app__sidebar">
Content
</div>
<div class="app__body" id="iscroll-container">
<div id="iscroll-scroller">
<h1>iScroll Content</h1>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<h1>iScroll Content</h1>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<h1>iScroll Content</h1>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<h1>iScroll Content</h1>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<h1>iScroll Content</h1>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<button type="button" onclick="alert('Clicked!')">Click me</button>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<h1>iScroll Content</h1>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<h1>iScroll Content</h1>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<h1>iScroll Content</h1>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
<p>Lorem ipsum dolar sit amet</p>
</div>
</div>
<script type="text/javascript">
var myScroll;
var useIScroll = false;
function loaded() {
if (useIScroll) {
document.getElementById('iscroll-container').style.overflow = 'hidden';
myScroll = new IScroll('#iscroll-container', { mouseWheel: true });
}
}
</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment