scroll-drag module-自定义滚动条组件,依赖于drag module 组件！

html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="scroll-bar.css" rel="stylesheet">
<style>
    *{
        margin: 0; padding: 0;
    }
    body, html{
        width: 100%; height: 100%;
        overflow: hidden;
    }
    #scroll_drag{
        width: 50%; height: 50%; margin:30px auto 0;
        position: relative;
        border: 1px solid #000;
    }
    #scroll_drag p{
        line-height: 100px;
    }
    .scroll_window{ width: 50%; height: 100%;overflow: hidden;}
    
</style>
</head>
<body>
    <div id="scroll_drag">
        <div class="scroll_window">
            <p>测试文字1</p>
            <p>测试文字2</p>
            <p>测试文字3</p>
            <p>测试文字</p>
            <p>测试文字</p>
            <p>测试文字</p>
            <p>测试文字</p>
            <p>测试文字</p>
            <p>测试文字</p>
            <p>测试文字2</p>
        </div>
    </div>
    <script src="./js/jquery-1.4.1.min.js"></script>
    <script src="./js/drag.js"></script>
    <script src="./js/scroll-drag.js"></script>
    <script>
        var scroll = new ScrollDrag($('.scroll_window'));
    </script>
</body>
</html>

css:

.scroll_bar{
        position: absolute; right: 0; top: 0;
        height: 100%; width: 12px;
        background-color: #ccc;
    }
    .scroll_bar a{
        position: absolute; top: 0; left: 0;
        height: 10%; width: 100%;
        background-color: #777;
    }
    .scroll_bar a:hover{
        background-color: #555;
    }

js:

(function(){

    function ScrollDrag(self, opt){
        this.self = self;        //滚动的窗口
        this.selfPar = this.self.parent();    //滚动的窗口父对象
        this.bar = false;    //侧边栏滚动条
        this.barBtn = false;//侧边栏滚动条按钮

        this.maxScrollY = 0;    //窗口最大滚动y坐标
        this.barBtnMaxY = 0;    //按钮最大滚动y坐标

        this.config = {};    //配置

        ScrollDrag.unite.call(this, opt);    //合并配置
        this.init();
    }
    ScrollDrag.prototype = {
        init: function(){
            this.createBar();    //创建一个侧边栏滚动条

            this.setMaxScrollY();    //设置窗口最大滚动y坐标
            this.setBarBtnHeight();    //设置按钮height
            this.setBarBtnMaxY();    //设置按钮最大滚动y坐标

            this.bindDrag();    //加拖拽
            this.resize();    //窗口发生变化的时候更新数据
            this.mousewheel();    //滚轮
        },
        setMaxScrollY: function(){
            this.maxScrollY = this.self[0].scrollHeight - this.self.height();
        },
        setBarBtnHeight: function(){
            this.barBtn.height(this.self.height()/this.self[0].scrollHeight*this.bar.height());
        },
        setBarBtnTop: function(){
            this.drag.self.css('top', this.self[0].scrollTop / this.maxScrollY *this.barBtnMaxY);
        },
        setBarBtnMaxY: function(){
            this.barBtnMaxY = this.bar.height() - this.barBtn.height();
        },
        bindDrag: bindDrag,
        createBar: createBar,
        mousewheel: mousewheel,
        resize: resize
    };
    function createBar(){
        this.bar = $('<div class="scroll_bar"><a href="javascript:;"></a></div>').appendTo(this.selfPar);
        this.barBtn = this.bar.children().eq(0);
    }

    function bindDrag(){
        var _this = this;

        _this.drag = new Drag(_this.barBtn, {
            minX: 0,
            maxX: 0,
            minY: 0,
            maxY: _this.barBtnMaxY
        });

        _this.drag.addMousemove(function(){
            if(_this.config.change)
                _this.setMaxScrollY();
            _this.drag.config.maxY = _this.barBtnMaxY;
            _this.self[0].scrollTop = _this.drag.y / _this.barBtnMaxY * _this.maxScrollY;
        });
    }

    function mousewheel(){
        var down = true,
        _this = this;

        function wheel(ev){
            ev = ev||event;
            down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0;

            if(_this.config.change)
                _this.setMaxScrollY();
            if(down){
                _this.self[0].scrollTop += _this.config.speed;
            }
            else
                _this.self[0].scrollTop -= _this.config.speed;

            _this.setBarBtnTop();
            
            if(ev.preventDefault)    
                ev.preventDefault();
            else
                return false;
        }
        if(this.self[0].attachEvent){
            this.self[0].attachEvent('onmousewheel', wheel);
        }
        else{
            this.self[0].addEventListener('DOMMouseScroll', wheel, false);
            this.self[0].addEventListener('mousewheel', wheel, false);
        }
    }

    function resize(){
        var _this = this, timer;

        $(window).resize(function(){
            clearTimeout(timer);
            timer = setTimeout(function(){
                _this.setMaxScrollY();
                _this.setBarBtnHeight();
                _this.setBarBtnMaxY();
                _this.setBarBtnTop();
            }, 250)
        });
    }

    ScrollDrag.unite = function(opt){
        var attr;

        for(attr in ScrollDrag.config)
            this.config[attr] = ScrollDrag.config[attr];
        if(opt){
            for(attr in opt)
                this.config[attr] = opt[attr];
        }
    }
    ScrollDrag.config = {
        change: false,
        speed: 20
    };

    this.ScrollDrag = ScrollDrag;

})();

 

posted @ 2013-11-24 16:11  web coder  阅读(156)  评论(0)    收藏  举报