function stopdefault(e) {// 禁止浏览器默认行为 var e= e || event; if (e.preventdefault) { e.preventdefault(); } else { e.returnvalue = false; } } //模拟滚动条 function imitatescroll(scrollbox, scrollobj, scrollbar, scrollbtn) {//scrollbox被滚动对象外框,scrollobj被滚动对象,scrollbar滚动条块,滚动条按钮 this.init(scrollbox, scrollobj, scrollbar, scrollbtn); } imitatescroll.prototype = { scale:function() {//被滚动对象与被滚动对象外框的高度比例计算 return (this.scrollobj.scrollheight/this.scrollbox.clientheight); }, scrollbtnmousedown:function(ev) {//滚动按钮按下 var _this = this; var disy = ev.clienty - this.scrollbtn.offsettop;//鼠标y坐标距离滚动按钮头部的距离 var maxtop = this.scrollbar.clientheight - this.scrollbtn.offsetheight; document.onmousemove = function(ev) { if (document.all) {//ie 禁止选择 document.body.onselectstart = new function("return false"); } else {// chrome, ff document.body.classname = "chromeonselectstart"; } var oevent = ev || event; var t = oevent.clienty - disy; t = t>maxtop ? maxtop : t; t = t<0 ? 0 : t; _this.scrollbtn.style.top = t + "px"; //_this.scrollobj.style.top = -t / _this.scrollbar.clientheight * _this.scrollobj.scrollheight + "px"; _this.scrollobj.style.top = -t / (_this.scrollbar.clientheight-_this.scrollbtn.offsetheight) * (_this.scrollobj.scrollheight-_this.scrollbox.clientheight) + "px"; }; document.onmouseup = function() { if (document.all) {//ie 解除禁止选择 document.body.onselectstart = new function("return true"); } else {// chrome, ff document.body.classname = ""; } document.onmousemove = document.onmouseup = null;//清除move和up事件 }; }, scrollboxmousewheel:function(ev) {//鼠标滚轮滚动 var direct = 0; var topcur = this.scrollbtn.offsettop; var maxtop = this.scrollbar.clientheight - this.scrollbtn.offsetheight; //滚轮每次滚动,滚动按钮该走的距离,测试chrome滚8次差不多一屏 var directtop = this.scrollbox.clientheight / 8 / this.scrollobj.scrollheight * this.scrollbar.clientheight; directtop = directtop>0 ? math.ceil(directtop) : math.floor(directtop); stopdefault(ev);//禁止浏览器自身的滚动条滚动效果 if (ev.wheeldelta) {//ie/opera/chrome direct = ev.wheeldelta; } else if (ev.detail) {//firefox direct = ev.detail * (-1); } if(parsefloat(direct) > 0) { var topend = topcur - directtop; if (topend < 0) {topend = 0;} } else { var topend = topcur + directtop; topend = topend>maxtop ? maxtop : topend; } this.scrollbtn.style.top = topend + "px"; //this.scrollobj.style.top = -topend / this.scrollbar.clientheight * this.scrollobj.scrollheight + "px"; this.scrollobj.style.top = -topend / (this.scrollbar.clientheight-this.scrollbtn.offsetheight) * (this.scrollobj.scrollheight-this.scrollbox.clientheight) + "px"; }, init:function(scrollbox, scrollobj, scrollbar, scrollbtn) {//初始化 this.scrollbox = typeof scrollbox == "string" ? document.getelementbyid(scrollbox) : scrollbox; this.scrollobj = typeof scrollobj == "string" ? document.getelementbyid(scrollobj) : scrollobj; this.scrollbar = typeof scrollbar == "string" ? document.getelementbyid(scrollbar) : scrollbar; this.scrollbtn = typeof scrollbtn == "string" ? document.getelementbyid(scrollbtn) : scrollbtn; var scale = this.scale();////被滚动对象与被滚动对象外框的高度比例 if (scale <= 1) {//判断是否达到产生滚动条的条件 this.scrollbar.style.display = "none"; return; } else { this.scrollbar.style.display = "block"; } // if(_this.scrollobj.scrollheight+_this.scrollobj.offsettop < _this.scrollbox.clientheight) // {//判断被滚动对象是否滚过头了 // _this.scrollobj.style.top = _this.scrollbox.clientheight-_this.scrollobj.scrollheight+"px"; // } //初始化滚动按钮的高度和top值 //this.scrollbtn.style.height = 20 + "px"; //设定滚动按钮的高度 //this.scrollbtn.style.top = -this.scrollobj.offsettop/this.scrollobj.scrollheight*this.scrollbar.clientheight + "px"; var _this = this; this.scrollbtn.onmousedown = function(e) {//滚动按钮拖拽事件 var e = e || event; _this.scrollbtnmousedown(e); }; //绑定滚轮事件 if (this.scrollbox.addeventlistener) {//ff3.5以下 this.scrollbox.addeventlistener("dommousescroll", function(e) { var e = e || event; _this.scrollboxmousewheel(e) }, false); } //w3c this.scrollbox.onmousewheel = function(e) { var e = e || event; _this.scrollboxmousewheel(e) }; //ie/opera/chrome } }