JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
<div id="scrollview-container">
<div id="scrollview-header">
<h1>ScrollView 1</h1>
</div>
<div id="scrollview-content" class="yui3-scrollview-loading">
<ul>
<li><a href="http://www.acdc.com/" title="AC/DC | The Official AC/DC Site">AC/DC</a></li>
<li><a href="http://www.aerosmith.com/" title="Aerosmith | Aerosmith -">Aerosmith</a></li>
<li><a href="http://www.billyjoel.com/" title="Billy Joel | The Official Billy Joel Site">Billy Joel</a></li>
<li><a href="http://www.bobdylan.com/" title="Home Page | Bob Dylan">Bob Dylan</a></li>
<li><a href="http://www.bobseger.com/" title="Bob Seger | Official Site | Home">Bob Seger</a></li>
<li><a href="http://www.bonjovi.com/" title="Bon Jovi † The Official Website">Bon Jovi</a></li>
<li><a href="http://www.brucespringsteen.net/" title="BRUCE SPRINGSTEEN IS AWESOME">Bruce Springsteen</a></li>
<li><a href="http://www.creed.com/" title="Creed.com – The Official Website of Creed">Creed</a></li>
<li><a href="http://en.wikipedia.org/wiki/Creedence_Clearwater_Revival" title="Creedence Clearwater Revival - Wikipedia, the free encyclopedia">Creedence Clearwater Revival</a></li>
<li><a href="http://www.davematthewsband.com/" title="DAVE MATTHEWS BAND | Home Page | Dave Matthews Band">Dave Matthews Band</a></li>
<li><a href="http://www.defleppard.com/news/" title="DefLeppard.com | the official Def Leppard web site">Def Leppard</a></li>
<li><a href="http://www.eaglesband.com/" title="Eagles | eaglesband.com">The Eagles</a></li>
<li><a href="http://www.bunnymen.com/" title="Echo & The Bunnymen">Echo and the Bunnymen</a></li>
<li><a href="http://www.eminem.com/" title="Eminem : Official Site">Eminem</a></li>
<li><a href="http://www.fleetwoodmac.com/"...
CSS
html, body {
margin:0;
padding:0;
font-family: arial,helvetica,clean,sans-serif;
}
#additional-content {
display:block;
margin:10px;
}
#additional-content p {
margin-bottom:5px;
}
/* === scrollview styles === */
#scrollview , #scrollview2 {
border:1px solid #000;
border-top:0;
}
#scrollview-content li, #scrollview-content2 li {
border-bottom: 1px solid #ccc;
padding: 8px;
font-size: 140%;
font-weight: bold;
background-color:#fff;
}
/* For IE 6/7 - needs a background color (above) to pick up events, and zoom, to fill the UL */
#scrollview-content li , #scrollview-content2 li {
*zoom:1;
}
/* For IE7 - needs zoom, otherwise clipped content is not rendered */
#scrollview-content ul , #scrollview-content2 ul {
*zoom:1;
}
/* === scrollview container and header styles === */
#scrollview-container, #scrollview-container2 {
width:200px;
float:left;
margin:0 10px;
}
#scrollview-header, #scrollview-header2 {
background-color:#6d83a1;
border:1px solid #000;
border-bottom:#2d3033;
height:44px;
background: -webkit-gradient(
linear,
left top,
left bottom,
from(#d8dee6),
color-stop(0.01, #b0bccc),
color-stop(0.49, #889bb3),
color-stop(0.50, #8094ae),
to(#6d83a1)
);
}
#scrollview-header h1, #scrollview-header2 h1 {
color: #fff;
margin:0;
padding:10px 0;
text-align:center;
font-size:150%;
font-weight:bold;
text-shadow: 0 -1px 0 rgba(0,0,0,0.7);
}
JavaScript
YUI().use('scrollview', function(Y) {
// override the _mousewheel method 3.6.0pr4's
Y.ScrollView.prototype._mousewheel = function(e) {
var scrollY = this.get('scrollY'),
boundingBox = this._bb,
contentBox = this._cb,
scrollOffset = 10, // 10px
scrollToY = scrollY - (e.wheelDelta * scrollOffset);
if (boundingBox.contains(e.target)){
this.scrollTo(0, scrollToY);
if (this.scrollbars) {
this.scrollbars._update();
this.scrollbars.flash();
}
// prevent browser default behavior on mouse scroll
e.preventDefault();
}
};
var scrollView = new Y.ScrollView({
id: "scrollview",
srcNode: '#scrollview-content',
height: 310,
flick: {
minDistance:10,
minVelocity:0.3,
axis: "y"
}
});
scrollView.render();
var scrollView2 = new Y.ScrollView({
id: "scrollview",
srcNode: '#scrollview-content2',
height: 310,
flick: {
minDistance:10,
minVelocity:0.3,
axis: "y"
}
});
scrollView2.render();
});