js实现一个自定义的滚动条

最新推荐文章于 2024-08-21 11:07:47 发布
chyykk
最新推荐文章于 2024-08-21 11:07:47 发布
阅读量1.9k
点赞数
分类专栏：小功能实现方式文章标签： javascript
小功能实现方式专栏收录该内容
9 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>div模拟的自定义滚动条</title>  
<style type="text/css">  
* {  
    margin: 0;  
    padding: 0;  
}  

p {  
    height: 1000px;  
}  

#mainBox {  
    width: 400px;  
    height: 500px;  
    border: 1px #bbb solid;  
    position: fixed; 
    top:10%;
    left:50%;
    overflow: hidden;  

}  

#content {  
    height: 2500px;  
    position: absolute;  
    left: 0;  
    top: 0;  
    background:url(img/scrollTest.jpg);  
}  

.scrollDiv {  
    width: 5px;  
    position: absolute;  
    top: 0;  
    background: #666;  
    border-radius: 10px;  
}  
</style>  
</head>  

<body>  
    <div id="mainBox">  
        <div id="content"></div>  
    </div>  
    <p></p>  
    <script type="text/javascript">  
        var doc = document;  
        var _wheelData = -1;  
        var mainBox = doc.getElementById('mainBox');  
        function bind(obj, type, handler) {  
            var node = typeof obj == "string" ? $(obj) : obj;  
            if (node.addEventListener) {  
                node.addEventListener(type, handler, false);  
            } else if (node.attachEvent) {  
                node.attachEvent('on' + type, handler);  
            } else {  
                node['on' + type] = handler;  
            }  
        }  
        function mouseWheel(obj, handler) {  
            var node = typeof obj == "string" ? $(obj) : obj;  
            bind(node, 'mousewheel', function(event) {  
                var data = -getWheelData(event);  
                handler(data);  
                if (document.all) {  
                    window.event.returnValue = false;  
                } else {  
                    event.preventDefault();  
                }  

            });  
            //火狐  
            bind(node, 'DOMMouseScroll', function(event) {  
                var data = getWheelData(event);  
                handler(data);  
                event.preventDefault();  
            });  
            function getWheelData(event) {  
                var e = event || window.event;  
                return e.wheelDelta ? e.wheelDelta : e.detail * 40;  
            }  
        }  

        function addScroll() {  
            this.init.apply(this, arguments);  
        }  
        addScroll.prototype = {  
            init : function(mainBox, contentBox, className) {  
                var mainBox = doc.getElementById(mainBox);  
                var contentBox = doc.getElementById(contentBox);  
                var scrollDiv = this._createScroll(mainBox, className);  
                this._resizeScorll(scrollDiv, mainBox, contentBox);  
                this._tragScroll(scrollDiv, mainBox, contentBox);  
                this._wheelChange(scrollDiv, mainBox, contentBox);  
                this._clickScroll(scrollDiv, mainBox, contentBox);  
            },  
            //创建滚动条  
            _createScroll : function(mainBox, className) {  
                var _scrollBox = doc.createElement('div')  
                var _scroll = doc.createElement('div');  
                var span = doc.createElement('span');  
                _scrollBox.appendChild(_scroll);  
                _scroll.appendChild(span);  
                _scroll.className = className;  
                mainBox.appendChild(_scrollBox);  
                return _scroll;  
            },  
            //调整滚动条  
            _resizeScorll : function(element, mainBox, contentBox) {  
                var p = element.parentNode;  
                var conHeight = contentBox.offsetHeight;  
                var _width = mainBox.clientWidth;  
                var _height = mainBox.clientHeight;  
                var _scrollWidth = element.offsetWidth;  
                var _left = _width - _scrollWidth;  
                p.style.width = _scrollWidth + "px";  
                p.style.height = _height + "px";  
                p.style.left = _left + "px";  
                p.style.position = "absolute";  
                p.style.background = "#ccc";  
                contentBox.style.width = (mainBox.offsetWidth - _scrollWidth)  
                        + "px";  
                var _scrollHeight = parseInt(_height * (_height / conHeight));  
                if (_scrollHeight >= mainBox.clientHeight) {  
                    element.parentNode.style.display = "none";  
                }  
                element.style.height = _scrollHeight + "px";  
            },  
            //拖动滚动条  
            _tragScroll : function(element, mainBox, contentBox) {  
                var mainHeight = mainBox.clientHeight;  
                element.onmousedown = function(event) {  
                    var _this = this;  
                    var _scrollTop = element.offsetTop;  
                    var e = event || window.event;  
                    var top = e.clientY;  
                    //this.onmousemove=scrollGo;  
                    document.onmousemove = scrollGo;  
                    document.onmouseup = function(event) {  
                        this.onmousemove = null;  
                    }  
                    function scrollGo(event) {  
                        var e = event || window.event;  
                        var _top = e.clientY;  
                        var _t = _top - top + _scrollTop;  
                        if (_t > (mainHeight - element.offsetHeight)) {  
                            _t = mainHeight - element.offsetHeight;  
                        }  
                        if (_t <= 0) {  
                            _t = 0;  
                        }  
                        element.style.top = _t + "px";  
                        contentBox.style.top = -_t  
                                * (contentBox.offsetHeight / mainBox.offsetHeight)  
                                + "px";  
                        _wheelData = _t;  
                    }  
                }  
                element.onmouseover = function() {  
                    this.style.background = "#444";  
                }  
                element.onmouseout = function() {  
                    this.style.background = "#666";  
                }  
            },  
            //鼠标滚轮滚动，滚动条滚动  
            _wheelChange : function(element, mainBox, contentBox) {  
                var node = typeof mainBox == "string" ? $(mainBox) : mainBox;  
                var flag = 0, rate = 0, wheelFlag = 0;  
                if (node) {  
                    mouseWheel(  
                            node,  
                            function(data) {  
                                wheelFlag += data;  
                                if (_wheelData >= 0) {  
                                    flag = _wheelData;  
                                    element.style.top = flag + "px";  
                                    wheelFlag = _wheelData * 12;  
                                    _wheelData = -1;  
                                } else {  
                                    flag = wheelFlag / 12;  
                                }  
                                if (flag <= 0) {  
                                    flag = 0;  
                                    wheelFlag = 0;  
                                }  
                                if (flag >= (mainBox.offsetHeight - element.offsetHeight)) {  
                                    flag = (mainBox.clientHeight - element.offsetHeight);  
                                    wheelFlag = (mainBox.clientHeight - element.offsetHeight) * 12;  

                                }  
                                element.style.top = flag + "px";  
                                contentBox.style.top = -flag  
                                        * (contentBox.offsetHeight / mainBox.offsetHeight)  
                                        + "px";  
                            });  
                }  
            },  
            _clickScroll : function(element, mainBox, contentBox) {  
                var p = element.parentNode;  
                p.onclick = function(event) {  
                    var e = event || window.event;  
                    var t = e.target || e.srcElement;  
                    var sTop = document.documentElement.scrollTop > 0 ? document.documentElement.scrollTop  
                            : document.body.scrollTop;  
                    var top = mainBox.offsetTop;  
                    var _top = e.clientY + sTop - top - element.offsetHeight  
                            / 2;  
                    if (_top <= 0) {  
                        _top = 0;  
                    }  
                    if (_top >= (mainBox.clientHeight - element.offsetHeight)) {  
                        _top = mainBox.clientHeight - element.offsetHeight;  
                    }  
                    if (t != element) {  
                        element.style.top = _top + "px";  
                        contentBox.style.top = -_top  
                                * (contentBox.offsetHeight / mainBox.offsetHeight)  
                                + "px";  
                        _wheelData = _top;  
                    }  
                }  
            }  
        }  
        new addScroll('mainBox', 'content', 'scrollDiv');  
    </script>  
</body>  
</html>