Fix - YUI 3.5.1 ScrollView Bug #2532377

Bug @ http://yuilibrary.com/projects/yui3/ticket/2532377

by Derek Gathright

HTML

<script src="http://yui.yahooapis.com/combo?3.5.1/build/yui/yui.js"></script>
<div class="container vert-container">
    <div class="hd">Vertical 01</div>

    <!-- SV starts here -->        
    <div id="sv-vert01-content" class="vert-content yui3-scrollview-loading">
        <ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
    </div>
</div>

<div class="container vert-container">
    <div class="hd">Vertical 02</div>

    <!-- SV starts here -->
    <div id="sv-vert02-content" class="vert-content yui3-scrollview-loading">
        <ul><li>a</li><li>b</li><li>c</li><li>d</li></ul>
    </div>
</div>

CSS

.vert-container {
    width:200px;
}

.vert-content ul li {
    width:198px;
    height:298px;
    line-height:298px;
    margin:0;
    *zoom:1;
}

.vert-content ul li {
    padding:0;
    border:1px solid #00ff00;
    background:#eee;
    font-size:150px;
    text-align:center;
    vertical-align:middle;
}

JavaScript

var svVert, svVertPaged;

YUI({
    filter: "raw"
}).use("scrollview", "scrollview-paginator", function(Y) {

    // Override the _mousewheel event handler
    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();
            }
            
            e.preventDefault();
        }
    };
    
    
    new Y.ScrollView({
        id: "svVert01",
        srcNode: "#sv-vert01-content",
        height: 300,
        width: 200,
        render: true
    });

    new Y.ScrollView({
        id: "svVert02",
        srcNode: "#sv-vert02-content",
        height: 300,
        width: 200,
        render: true
    });
});