Skip to content

Instantly share code, notes, and snippets.

@tvachon
Last active Aug 29, 2015
Embed
What would you like to do?
A touch-friendly HTML/CSS inertial scrolling div.

A simple HTML/CSS based content well with inertial scrolling suitable for integrating into a CMS to create a dynamic scrolling div that's touch-friendly and desktop compatible.

Tested for compatibility Chrome, Safari, FF, IE8+, Android and mobile Safari.

Example: http://bl.ocks.org/tvachon/11263018

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
body {font-family: helvetica, arial, sans-serif;}
a {text-decoration: none;}
.window {
margin-top: 12px;
overflow-y: hidden;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
position: relative;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
/* fixes scrolling in IE */
padding-left: 0;
padding-right: 0;
}
.ie8 .window { /* assumes you are using conditional classes for IE fixes (http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) */
padding-top: 0;
padding-bottom: 0;
}
.slider-frame-wrapper{
overflow: hidden;
overflow-x: scroll;
}
.slider-frame {
overflow: visible;
margin-bottom: 0;
white-space: nowrap;
}
.ie8 .slider-frame {
margin: 20px 0;
}
.slider-panel {
max-width: 270px; /* width of each individual items */
display: inline-block;
vertical-align: top;
margin-right: 40px;
white-space: normal;
}
</style>
</head>
<body>
<!-- =Slider Module= -->
<div class="well window">
<div class="slider-frame-wrapper">
<ul class="slider-frame">
<li class="slider-panel"><div>Overline</div><h2><a href="#" alt="alt text">Headline text here</a></h2></li>
<li class="slider-panel"><div>Overline</div><h2><a href="#" alt="alt text">Headline text here</a></h2></li>
<li class="slider-panel"><div>Overline</div><h2><a href="#" alt="alt text">Headline text here</a></h2></li>
<li class="slider-panel"><div>Overline</div><h2><a href="#" alt="alt text">Headline text here</a></h2></li>
<li class="slider-panel"><div>Overline</div><h2><a href="#" alt="alt text">Headline text here</a></h2></li>
<li class="slider-panel"><div>Overline</div><h2><a href="#" alt="alt text">Headline text here</a></h2></li>
<li class="slider-panel"><div>Overline</div><h2><a href="#" alt="alt text">Headline text here</a></h2></li>
<li class="slider-panel"><div>Overline</div><h2><a href="#" alt="alt text">Headline text here</a></h2></li>
<li class="slider-panel"><div>Overline</div><h2><a href="#" alt="alt text">Headline text here</a></h2></li>
<li class="slider-panel"><div>Overline</div><h2><a href="#" alt="alt text">Headline text here</a></h2></li>
</ul><!-- .slider-window-frame -->
</div><!-- .slider-window-frame-wrapper -->
</div><!-- .well .window -->
<!-- =End Slider Module= -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment