JS 实现防ScrollBar效果

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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值