自定义滚动条和拖拽

实现自定义滚动条和拖拽滚动效果

<div class="dropDownMenu">
    <ul>
            <li><a href="#">平缝机</a></li>
            <li><a href="#">包缝机</a></li>
            <li><a href="#">绷缝机</a></li>
            <li><a href="#">平头锁眼机</a></li>
            <li><a href="#">钉扣机</a></li>
            <li><a href="#">套结机</a></li>
            <li><a href="#">链缝机</a></li>
            <li><a href="#">开袋机</a></li>
            <li><a href="#">暗缝机</a></li>
            <li><a href="#">敲扣机</a></li>
            <li><a href="#">全自动模板缝纫机</a></li>
    </ul>
    <div class="dragFrame">
        <div class="dragDiv"></div>
    </div>
</div>

        *{
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        .dropDownMenu{
            width: 128px;
            height: 224px;
            border: 1px solid #4f75cc;
            position: relative;
            overflow: hidden;
            border-top: none;
        }
        .dropDownMenu ul{
            position: absolute;
            top: 0;
            left: 0;
            width: 118px;
        }
        .dropDownMenu .dragFrame{
            position: absolute;
            right:0;
            top: 0;
               width: 9px;
               border: 1px solid #4f75cc;
               height: 224px;
               border-right: none;
               border-top: none;
        }
        .dropDownMenu .dragFrame .dragDiv{
            position: absolute;
            top: 0;
            right: 0;
            width: 9px;
            height:170px;
            background-color: #4f75cc;
            cursor: pointer;
        }
        .dropDownMenu ul li a{
            display: block;
            background-color: #fff;
            color: #666;
            line-height: 28px;
            width: 118px;
            text-align: center;
        }
        .dropDownMenu ul li a:hover{
            background-color: #d9dde4;
        }

CSS

<script type="text/javascript">
        window.onload = function(){
            var boxHeight = $(".dropDownMenu").height();
            var contentHeight = $(".dropDownMenu ul").height();
            var dropMenu=$(".deviceType");
            var dropDownMenu=$(".dropDownMenu");
            var dropBar = $(".dragFrame .dragDiv")

            var bili = contentHeight / boxHeight;
            var minTop = contentHeight - boxHeight;

            //决定滑块到底有多高。滑块的高度，就是盒子高除以比例：
            dropBar.css("height",boxHeight / bili);

            var nowtop = 0;
            //用户拖拽滑块的时候
            dropBar.draggable({
                "containment" : "parent" ,
                drag : function(event,ui){
                    //拖拽的时候发生的事情
                    var y = ui.position.top;
                    nowtop = -bili * y;
                    dropDownMenu.find("ul").css("top",nowtop);
                }
            });

            // 用户滚动滚轮的时候的事情
            dropDownMenu.mousewheel(function(event,delta){
                // 下面语句的意思，就是用户在box范围内滚动滚轮，就
                // 阻止页面的默认滚动
                event.preventDefault();
                nowtop = nowtop + 20 * delta;
                // 验收
                if(nowtop > 0 ){
                    nowtop = 0;
                }else if(nowtop < -minTop){
                    nowtop = -minTop;
                }
                dropDownMenu.find("ul").css("top",nowtop);
                dropBar.css("top",-nowtop / bili);
            });
        }
    </script>

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>

需要这三个插件