DIV 滚动条 设置样式不支持所有的浏览器
自制一个滚动条用JS实现滚动的效果
目前支持除IE6以外 支持所有的浏览器(FF、Opera、Google....)
Bar效果源文件
//滚动Bar的ID 滚动DIV的ID 左边Bar 右边Bar var ScrollBar = function(bar_ID, context_ID, barLeft_ID, barReight_ID,moveBy_PX){ var _bar_obj;//Bar对象 var _barLeft_obj//左移对象 var _barRight_obj;//右移对象 var _context_obj;//内容对象 var _isMoveBar = false;//是否为拖动Bar var _move_max_number;//Bar移动的最大数值 var _move_number;//Bar 移动的数据值 var _bar_height;//Bar 的基本高度 var _context_height;//内容的基本高度 var _bar_base_height;//Bar 基本高度 var _mouse_curr = 0;//鼠标 点击Bar的位置 var _bar_curr_top = 0;//鼠标点击Bar 距TOp的距离 var _move_bar_maxto;//Bar 移动的最大位置 var _bar_px_number;//Bar每个象素代表多少数值 var _moveByPX=moveBy_PX;//如果是根据象素移动,则移动多少象素 function _init(){ //初始化对象 _bar_obj = $(bar_ID); _context_obj = $(context_ID); _barLeft_obj = $(barLeft_ID); _barRight_obj = $(barReight_ID); _context_height = _context_obj.clientHeight; _move_number = 0; _move_max_number = (_context_obj.scrollHeight / _context_obj.clientHeight) - 1; _bar_base_height = _context_obj.clientHeight - _barLeft_obj.clientHeight - _barRight_obj.clientHeight; var bar_height_num = _context_obj.clientHeight / _context_obj.scrollHeight; //初始化Bar 高度 _bar_height = ((bar_height_num >= 1 ? 1 : bar_height_num) * _bar_base_height); _bar_obj.style.height = _bar_height + "px"; _move_bar_maxto = _bar_base_height + (_barLeft_obj.clientHeight - _bar_obj.clientHeight); _bar_px_number = 1 / _bar_height; //事件动态注册 _addEvent(_bar_obj, "mousedown", _barmousedown); _addEvent(document, "mouseup", _changeState); _addEvent(document, "mousemove", _movebar); //点击两边的Bar是否 按象素滚动。 if(_moveByPX){ _addEvent(_barLeft_obj,"click",function(){_barMoveByPx(-_moveByPX)}); _addEvent(_barRight_obj,"click",function(){_barMoveByPx(_moveByPX)}); }else{ _addEvent(_barLeft_obj, "click", function(){_barMoveByNumber(-0.1)}); _addEvent(_barRight_obj, "click", function(){_barMoveByNumber(0.1)}); } }; function _changeState(){ _isMoveBar = false; } //添加事件 function _addEvent(obj, evt, fn){ if (window.attachEvent) { obj.attachEvent("on" + evt, fn) } else { obj.addEventListener(evt, fn, false); } }; //移动 Context内容 function _barMoveByContextTop(){ _move_number = (_bar_obj.offsetTop - _barLeft_obj.clientHeight) * _bar_px_number; _context_obj.scrollTop = _context_height * _move_number; }; //根据 比例移动 Bar function _barMoveByNumber(num){ _move_number += num; if (_move_number < 0) { _move_number = 0; } if (_move_number > _move_max_number) { _move_number = _move_max_number; } _moveBarTo(_barLeft_obj.clientHeight + (_bar_height * _move_number)); }; //根据 象素 移动Bar function _barMoveByPx(num){ _moveBarTo(_bar_obj.offsetTop + num); }; //根据 ID 取得元素 function $(id){ return document.getElementById(id); }; //鼠标 移动 (拖动Bar) function _movebar(){ if (_isMoveBar) { var event = _mouseCoords(arguments[0] || window.event); _moveBarTo(_bar_curr_top + (event.y - _mouse_curr)); } }; //把Bar移动 到某位置 function _moveBarTo(m_to){ if (m_to > _barLeft_obj.clientHeight && m_to < _move_bar_maxto) { _bar_obj.style.top = m_to+"px"; } _barMoveByContextTop(); }; //得到鼠标的坐标 function _mouseCoords(ev){ if (ev.pageX || ev.pageY) { return {x: ev.pageX,y: ev.pageY}; } return ev; } //鼠标点击 function _barmousedown(){ var event = _mouseCoords(arguments[0] || window.event); _isMoveBar = true; _mouse_curr = event.y; _bar_curr_top = _bar_obj.offsetTop; }; _init(); };
//页面调用源文件
//配置信息 var bar_ID = "bar";//滚动Bar的ID var context_ID = "main_value";//滚动DIV的ID var barLeft_ID = "bar_left";//左边Bar var barReight_ID = "bar_right"; //右边Bar var moveBy_PX;//两边按钮,根据象素移动 function init(){ ScrollBar(bar_ID, context_ID, barLeft_ID, barReight_ID,moveBy_PX); } window.onload = init
<div class="Main_cont" id="main_value"> 内容。。。。。。 </div> <div class="scrollbar" id="dome"> <img class="track" src="Images/sb.gif" alt=""> <a id="bar" style="background-color:black;" class="arrow-left"></a> <img id="bar_left" class="arrow-right" src="Images/sl.gif" alt=""> <img id="bar_right" class="bar" src="Images/sr.gif" alt=""> </div>
1 楼
namesolong
2010-07-07
蛮强大的!!