ScrollView

by Derek Gathright

HTML

<script src="http://yui.yahooapis.com/3.7.3/build/yui/yui-min.js"></script>
<div id="main" class="yui3-skin-sam">
<div id="tabview">
   <ul>
      <li class="selected"><a href="#tab"><em>Scrollview sample</em></a></li>
   </ul>
   <div>
      <div id="tab" class="">
         <div id="scrollview-container">
            <div id="scrollview-header">
               <h1>Basic ScrollView</h1>
            </div>
            <div id="scrollview-content" class="yui3-scrollview-loading">
               <ul>
                  <li><input type="text" value="AC/DC" readonly=" readonly" /></li>
                  <li><input type="text" value="Aerosmith" readonly=" readonly" /></li>
                  <li><input type="text" value="Billy Joel" readonly=" readonly" /></li>
                  <li><input type="text" value="Bob Dylan" readonly=" readonly" /></li>
                  <li><input type="text" value="Bob Seger" readonly=" readonly" /></li>
                  <li><input type="text" value="Bon Jovi" readonly=" readonly" /></li>
                  <li><input type="text" value="Bruce Springsteen" readonly=" readonly" /></li>
                  <li><input type="text" value="Creed" readonly=" readonly" /></li>
                  <li><input type="text" value="Creedence Clearwater Revival" readonly=" readonly" /></li>
                  <li><input type="text" value="Dave Matthews Band" readonly=" readonly" /></li>
                  <li><input type="text" value="Def Leppard" readonly=" readonly" /></li>
                  <li><input type="text" value="Eagles" readonly=" readonly" /></li>
                  <li><input type="text" value="Eminem" readonly=" readonly" /></li>
                  <li><input type="text" value="Fleetwood Mac" readonly=" readonly" /></li>
                  <li><input type="text" value="Green Day" readonly=" readonly" /></li>
                  <li><input type="text" value="Guns N' Roses" readonly=" readonly" /></li>
                  <li><input type="text" value="James...

CSS

.yui3-skin-sam .yui3-tabview-list {
    border: solid #B5D2E4;
    border-width: 0 0 0px 0px;
}

.yui3-skin-sam .yui3-tab-selected .yui3-tab-label {
    border-color: #243356;
}

.yui3-skin-sam .yui3-tab-selected .yui3-tab-label, .yui3-skin-sam .yui3-tab-selected .yui3-tab-label:focus, .yui3-skin-sam .yui3-tab-selected .yui3-tab-label:hover {
    background: -moz-linear-gradient(center top, #A7D5FB 0%, #1585D0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #A7D5FB), color-stop(1, #1585D0));
    background: -moz-linear-gradient(center top, #A7D5FB 0%, #1585D0 100%);
    color: white;
    border: 1px solid #0A8CC7;
}

JavaScript

YUI().use('tabview', 'scrollview', function(Y) {

    var tabView = new Y.TabView({
        srcNode: '#tabview'
    });

    tabView.render();

    var scrollView = new Y.ScrollView({
        id: "scrollview",
        srcNode: '#scrollview-content',
        height: 310,
        flick: {
            minDistance: 10,
            minVelocity: 0.3,
            axis: "y"
        }
    });

    scrollView.render();

    var content = scrollView.get("contentBox");

    content.delegate("click", function(e) {
        if (Math.abs(scrollView.lastScrolledAmt) > 2) {
            e.preventDefault();
            Y.log("Link behavior suppressed.")
        }
    }, "a");

});