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: /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 (https://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>

<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>
        </div>
    </div>

</body>
</html>