自定义滚动条和拖拽

<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>

<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>