scroll模拟滚动条

【SCSCMS】
下载
新闻
文章
scroll模拟滚动条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>scroll模拟滚动条</title>
    <script type="text/javascript" src="images/jquery-1.4.4.min.js"></script>
    <style type="text/css">
        *{margin: 0;padding: 0;list-style: none}
        #tt{margin:50px;}
        .scs_scroll{overflow: hidden;position: relative;border: 1px solid #eee}
        .scs_scroll_bg,.scs_scroll_bar{position: absolute;right: 0;top:0;width: 10px;background-color: #f2f2f2;z-index: 100}
        .scs_scroll_bar{background-color: #bcbcbc;border-radius: 5px;height: 100px;z-index: 101;cursor: pointer}
        ul{background-color: #f9f9f9;position: absolute;width: 100%}
        ul li{border-bottom: 1px solid #ddd}
    </style>
</head>
<body>
<div id="tt">
    <div class="scs_scroll" style="height:200px;width:200px">
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </div>
</div>
<button type="button">增高</button>
<button type="button">减高</button>
<script type="text/javascript">
(function($) {
    $.extend($.fn, {
        scs_scroll: function() {
            var _this = $(this);
            _this.each(function(){
                var _self = $(this),i_outH = _self.height(),i_inH = _self.children(":first").height(),
                        i_percentage = i_outH / i_inH,_data = _self.data("scroll"),_move = false,_y;
                if(i_percentage < 1){
                    if("undefined" == typeof _data){
                        _data = {div:_self.children().css("position","absolute"),outHeight:i_outH,inHieght:i_inH};
                        _data.bg = $('<div class="scs_scroll_bg" style="height: '+ i_outH +'px"></div>').appendTo(_self)
                                .mousedown(function(e){
                                    _data = $(this.parentNode).data("scroll");
                                    _y = parseInt(e.pageY - $(this).offset().top - _data.bar.height() / 2);
                                    _y < 0 && (_y = 0);
                                    _y > _data.max && (_y = _data.max);
                                    _data.bar.css({top:_y});
                                    _data.div.css({top:-1*_y /_data.max * (_data.inHieght - _data.outHeight)});
                                }).hover(function(){$(this).css("background-color","#e9e9e9")},function(){$(this).css("background-color","#f2f2f2")});
                        _data.bar = $('<div class="scs_scroll_bar" style="height:'+i_percentage * i_outH+'px"></div>').appendTo(_self)
                                .mousedown(function (e) {
                                    _data = $(this.parentNode).data("scroll");
                                    _move = true;
                                    _y = e.pageY - parseInt($(this).css("top"));
                                }).mousemove(function (e) {
                                    var y = e.pageY - _y;
                                    if (_move && y >= 0 && y <= _data.max){
                                        $(this).css({top:y});
                                        //滚动效果
                                        _data.div.css({top:-1*y /_data.max * (_data.inHieght - _data.outHeight)});
                                    }
                                }).mouseup(function () {
                                    _move = false;
                                }).mouseleave(function () {
                                    _move = false;
                                });
                        _data.max = (1 - i_percentage) * i_outH;
                        _self.data("scroll",_data);
                        function scrollFunc(e){
                            if(_data.bar.is(":visible")){
                                e = e || window.event;
                                var direct = e.wheelDelta || e.detail || 0,t = parseInt(_data.div.css("top")) || 0,max = _data.outHeight - _data.inHieght;
                                t += 30 * (direct < 0 ? 1 : -1);
                                t < max && (t = max);
                                t > 0 && (t = 0);
                                _data.div.css("top",t);
                                _data.bar.css("top",t/max * _data.max);
                                e.preventDefault && e.preventDefault();//阻止滚动事件冒泡
                                e.cancelBubble = true;//IE阻止滚动事件冒泡
                            }
                            return false;//IE低版本阻止滚动事件冒泡
                        }
                        document.addEventListener && this.addEventListener("DOMMouseScroll",scrollFunc, false);
                        this.onmousewheel = scrollFunc;
                    }
                    if(i_inH != _data.inHieght || i_outH != _data.outHeight){
                        _data.max = (1 - i_percentage) * i_outH;
                        _y = parseInt(_data.bar.css("top"),10);
                        if(_y > _data.max){
                            _y = _data.max;
                            _data.div.css({top:-1*_y /_data.max * (i_inH - i_outH)});
                        }
                        _data.bar.css({top:_y,height:i_percentage * i_outH});
                        _data.inHieght = i_inH;
                        _data.outHeight = i_outH;
                        _self.data("scroll",_data);
                        //可能露底了
                        if(i_inH < i_outH + Math.abs(_data.div.position().top)){
                            _data.bar.css({top:_data.max});
                            _data.div.css({top:i_outH - i_inH});
                        }
                    }
                }else if("object" == typeof _data){
                    _data.bg.remove();
                    _data.bar.remove();
                    _self.children(":first").css({top:0});
                    _self.removeData("scroll");//直接删除元素并移除data
                }
            });
            setTimeout(function(){_this.scs_scroll()},200);
            return _this;
        }
    });
})(jQuery);

$(function () {
    $(".scs_scroll").scs_scroll();
    var i = 1;
    $("button").click(function(){
        $(this).text() == "增高" ? $("ul").prepend('<li>'+(++i)+'</li>') : $("ul li:first").remove();
    })
});
</script>
</body>
</html>