scrolling problem

by jmchen

HTML

<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<div class="scrollable">
    <p>1Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>5Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>9Text</p>
    <p>1Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>5Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>9Text</p>
    <p>Text</p>
    <p>1Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>5Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>9Text</p>
    <p>Text</p>
    <p>1Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>5Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>9Text</p>
    <p>Text</p>
    <p>1Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>5Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>9Text</p>
    <p>Text</p>
    <p>1Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>5Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>9Text</p>
    <p>Text</p>
    <p>1Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>5Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>9Text</p>
    <p>Text</p>
    <p>1Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>5Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>9Text</p>
    <p>Text</p>
    <p>1Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>5Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>9Text</p>
    <p>Text</p>
    <p>1Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>5Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>9Text</p>
    <p>Text</p>
   ...

CSS

.scrollable {
    margin:10px;
    padding:10px;
    width:300px;
    height:100px;
    background:yellow;
    overflow-x:hidden;
    overflow-y:scroll;
}

JavaScript

$('.scrollable').bind('mousewheel DOMMouseScroll', function (e) {
    // debugger;
    var e0 = e.originalEvent,
        delta = e0.wheelDelta || -e0.detail;

    this.scrollTop += (delta < 0 ? 1 : -1) * 1030;
    e.preventDefault();
});