我已经为我的网站创建了一个滚动条，我可以使用我的鼠标指针滚动，我也想用鼠标滚动它

Question

我为我的网站创建了一个滚动条，我可以使用我的鼠标指针滚动，现在我想用鼠标滚动它也请帮帮我。

    <div class="scrollbar"></div>

    <div class="scrollable">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur. Nullam ornare pulvinar felis, in malesuada nulla fringilla eget. Suspendisse bibendum aliquet nulla, ac laoreet eros mattis at. Nunc tempus leo et sapien volutpat placerat. Nam eget urna nulla. Mauris sed mi mauris. Cras posuere aliquet enim a rhoncus. Donec sed vulputate velit. Morbi bibendum, ipsum eget elementum lacinia, neque justo iaculis orci, non lacinia erat diam vitae augue. Duis et arcu in augue bibendum fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur. Nullam ornare pulvinar felis, in malesuada nulla fringilla eget. Suspendisse bibendum aliquet nulla, ac laoreet eros mattis at. Nunc tempus leo et sapien volutpat placerat. Nam eget urna nulla. Mauris sed mi mauris. Cras posuere aliquet enim a rhoncus. Donec sed vulputate velit. Morbi bibendum, ipsum eget elementum lacinia, neque justo iaculis orci, non lacinia erat diam vitae augue. Duis et arcu in augue bibendum fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur. Nullam ornare pulvinar felis, in malesuada nulla fringilla eget. Suspendisse bibendum aliquet nulla, ac laoreet eros mattis at. Nunc tempus leo et sapien volutpat placerat. Nam eget urna nulla. Mauris sed mi mauris.
    </div>
</div>

这是我的JavaScript，我希望它使用鼠标滚轮滚动。

<script>
var parH = $('.parent').outerHeight(true);
var areaH = $('.scrollable').outerHeight(true);
var scrH = parH / (areaH/parH);

function dragging(){     
    var scrPos = $('.scrollbar').position().top;   
    $('.scrollable').css({top: -(scrPos*(areaH/parH)-1)});
}
$('.scrollbar').height(scrH);
$('.scrollbar').draggable({
    axis: 'y',
    containment: 'parent',    
    drag: function() {
         dragging()
    }

});
</script>

这是我的css

<style>
.parent{
    position:relative;
    height:200px;
    width:180px;
    background:#eee;
    overflow:hidden;
    padding-right:17px;
}
.scrollable{
    position:absolute;
    top:0px;        
    width:180px;
    background:#cf5;
}
.scrollbar{
    cursor:n-resize;
    position:absolute;
    top:0px;
    right:0px;
    z-index:2;
    background:#444;
    width:17px;
    border-radius:8px;
}
</style>