滚动条(兼容火狐、IE、chrome)[同事修改jsScrollbar]

yl.fighter

浏览: 257880 次
性别:
来自: 北京

最近访客更多访客>>

LiYunpeng

c4795712

wsl764263152

zo1698

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js jquery 滚动条

<!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>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding: 0px; list-style:none;}
.box { width:500px; margin:0 auto; position:relative; top:100px;  }
.Container { position: absolute; top:0px; left: 100px; width: 400px; height: 200px; background-color: #EEE; }
#Scroller-1 {  position: absolute;  overflow: hidden; width: 400px; height: 200px; }
#Scroller-1 p { margin: 0; padding: 10px 20px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 20px; color: #777; }
.Scroller-Container { position: absolute; top: 0px; left: 0px; }
.Scrollbar-Track { width: 10px; height: 200px; position: absolute; top: 0px; right:0px; background-color: #EEE; cursor:pointer;  }
.Scrollbar-Handle { position: absolute; top: 0px; left: 0px; width: 10px; height: 30px; background-color: #CCC; }
</style>
<script type="text/javascript">
var scroller  = null;
var scrollbar = null;
window.onload = function () {
  scroller  = new jsScroller(document.getElementById("Scroller-1"), 400, 200);
  scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, false);
}


function jsScroller (o, w, h) {
	var self = this;
	var list = o.getElementsByTagName("div");
	for (var i = 0; i < list.length; i++) {
		if (list[i].className.indexOf("Scroller-Container") > -1) {
			o = list[i]; // 以 o 为对象，将对象包含的class名为Scroller-Container的元素付给 对象 o			
		}
	}
	
	//Private methods
	this._setPos = function (x, y) {
		if (x < this.viewableWidth - this.totalWidth) 
			x = this.viewableWidth - this.totalWidth;
		if (x > 0) x = 0;
		if (y < this.viewableHeight - this.totalHeight) 
			y = this.viewableHeight - this.totalHeight;
		if (y > 0) y = 0;
		this._x = x;
		this._y = y;
		with (o.style) {
			left = this._x +"px";
			top  = this._y +"px";
		}
	};
	
	//Public Methods
	this.reset = function () {
		this.content = o;
		this.totalHeight = o.offsetHeight;
		this.totalWidth	 = o.offsetWidth;
		this._x = 0;
		this._y = 0;
		with (o.style) {
			left = "0px";
			top  = "0px";
		}
	};
	this.scrollBy = function (x, y) {
		this._setPos(this._x + x, this._y + y);
	};
	this.scrollTo = function (x, y) {
		this._setPos(-x, -y);
	};
	this.stopScroll = function () {
		if (this.scrollTimer) window.clearInterval(this.scrollTimer);
	};
	this.startScroll = function (x, y) {
		this.stopScroll();
		this.scrollTimer = window.setInterval(
			function(){ self.scrollBy(x, y); }, 40
		);
	};
	this.swapContent = function (c, w, h) {
		o = c;
		var list = o.getElementsByTagName("div");
		for (var i = 0; i < list.length; i++) {
			if (list[i].className.indexOf("Scroller-Container") > -1) {
				o = list[i];
			}
		}
		if (w) this.viewableWidth  = w;
		if (h) this.viewableHeight = h;
		this.reset();
	};
	
	//variables
	this.content = o;
	this.viewableWidth  = w;
	this.viewableHeight = h;
	this.totalWidth	 = o.offsetWidth;
	this.totalHeight = o.offsetHeight;
	this.scrollTimer = null;
	this.reset();
};




function jsScrollbar (o, s, a, ev) {
	var self = this;
	
	this.reset = function () {
		//Arguments that were passed
		this._parent = o;
		this._src    = s;
		this.auto    = a ? a : false;
		this.eventHandler = ev ? ev : function () {};
		//Component Objects
		this._up   = this._findComponent("Scrollbar-Up", this._parent);
		this._down = this._findComponent("Scrollbar-Down", this._parent);
		this._yTrack  = this._findComponent("Scrollbar-Track", this._parent);
		this._yHandle = this._findComponent("Scrollbar-Handle", this._yTrack);
		//Height and position properties
		this._trackTop = findOffsetTop(this._yTrack);
		this._trackHeight  = this._yTrack.offsetHeight;
		this._handleHeight = this._yHandle.offsetHeight;
		this._x = 0;
		this._y = 0;
		//Misc. variables
		this._scrollDist  = 5;
		this._scrollTimer = null;
		this._selectFunc  = null;
		this._grabPoint   = null;
		this._tempTarget  = null;
		this._tempDistX   = 0;
		this._tempDistY   = 0;
		this._disabled    = false;
		this._ratio = (this._src.totalHeight - this._src.viewableHeight)/(this._trackHeight - this._handleHeight);
		
		this._yHandle.ondragstart  = function () {return false;};
		this._yHandle.onmousedown = function () {return false;};
		if(window.event){ 
			this._addEvent(this._src.content, "mousewheel", this._scrollbarWheel);			
		}//W3C 
		else{
			this._addEvent(this._src.content, "DOMMouseScroll", this._scrollbarWheel);
		}
		
		this._removeEvent(this._parent, "mousedown", this._scrollbarClick);
		this._addEvent(this._parent, "mousedown", this._scrollbarClick);
		
		this._src.reset();
		with (this._yHandle.style) {
			top  = "0px";
			left = "0px";
		}
		this._moveContent();
		
		if (this._src.totalHeight < this._src.viewableHeight) {
			this._disabled = true;
			this._yHandle.style.visibility = "hidden";
			if (this.auto) this._parent.style.visibility = "hidden";
		} else {
			this._disabled = false;
			this._yHandle.style.visibility = "visible";
			this._parent.style.visibility  = "visible";
		}
	};
	this._addEvent = function (o, t, f) {
		if (o.addEventListener) o.addEventListener(t, f, false);
		else if (o.attachEvent) o.attachEvent('on'+ t, f);
		else o['on'+ t] = f;
	};
	this._removeEvent = function (o, t, f) {
		if (o.removeEventListener) o.removeEventListener(t, f, false);
		else if (o.detachEvent) o.detachEvent('on'+ t, f);
		else o['on'+ t] = null;
	};
	this._findComponent = function (c, o) {
		var kids = o.childNodes;
		for (var i = 0; i < kids.length; i++) {
			if (kids[i].className && kids[i].className == c) {
				return kids[i];
			}
		}
	};
	//Thank you, Quirksmode
	function findOffsetTop (o) {
		var t = 0;
		if (o.offsetParent) {
			while (o.offsetParent) {
				t += o.offsetTop;
				o  = o.offsetParent;
			}
		}
		return t;
	};
	this._scrollbarClick = function (e) {
		if (self._disabled) return false;
		
		e = e ? e : event;
		if (!e.target) e.target = e.srcElement;
		
		if (e.target.className.indexOf("Scrollbar-Up") > -1) self._scrollUp(e);
		else if (e.target.className.indexOf("Scrollbar-Down") > -1) self._scrollDown(e);
		else if (e.target.className.indexOf("Scrollbar-Track") > -1) self._scrollTrack(e);
		else if (e.target.className.indexOf("Scrollbar-Handle") > -1) self._scrollHandle(e);
		
		self._tempTarget = e.target;
		self._selectFunc = document.onselectstart;
		document.onselectstart = function () {return false;};
		
		self.eventHandler(e.target, "mousedown");
		self._addEvent(document, "mouseup", self._stopScroll, false);
		
		return false;
	};
	this._scrollbarDrag = function (e) {
		e = e ? e : event;
		var t = parseInt(self._yHandle.style.top);
		var v = e.clientY + document.body.scrollTop - self._trackTop;
		with (self._yHandle.style) {
			if (v >= self._trackHeight - self._handleHeight + self._grabPoint)
				top = self._trackHeight - self._handleHeight +"px";
			else if (v <= self._grabPoint) top = "0px";
			else top = v - self._grabPoint +"px";
			self._y = parseInt(top);
		}
		
		self._moveContent();
	};
	this._scrollbarWheel = function (e) {
		e = e ? e : event;
		var dir = 0;
		if (e.wheelDelta >= 120) dir = -1;
		if (e.wheelDelta <= -120) dir = 1;
		if(e.detail >=3) dir= 1;
		if(e.detail <=-3) dir = -1;
		
		self.scrollBy(0, dir * 20);
		e.returnValue = false;
	};
	this._startScroll = function (x, y) {
		this._tempDistX = x;
		this._tempDistY = y;
		this._scrollTimer = window.setInterval(function () {
			self.scrollBy(self._tempDistX, self._tempDistY); 
		}, 40);
	};
	this._stopScroll = function () {
		self._removeEvent(document, "mousemove", self._scrollbarDrag, false);
		self._removeEvent(document, "mouseup", self._stopScroll, false);
		
		if (self._selectFunc) document.onselectstart = self._selectFunc;
		else document.onselectstart = function () { return true; };
		
		if (self._scrollTimer) window.clearInterval(self._scrollTimer);
		self.eventHandler (self._tempTarget, "mouseup");
	};
	this._scrollUp = function (e) {this._startScroll(0, -this._scrollDist);};
	this._scrollDown = function (e) {this._startScroll(0, this._scrollDist);};
	this._scrollTrack = function (e) {
		var curY = e.clientY + document.body.scrollTop;
		this._scroll(0, curY - this._trackTop - this._handleHeight/2);
	};
	this._scrollHandle = function (e) {
		var curY = e.clientY + document.body.scrollTop;
		this._grabPoint = curY - findOffsetTop(this._yHandle);
		this._addEvent(document, "mousemove", this._scrollbarDrag, false);
	};
	this._scroll = function (x, y) {
		if (y > this._trackHeight - this._handleHeight) 
			y = this._trackHeight - this._handleHeight;
		if (y < 0) y = 0;
		
		this._yHandle.style.top = y +"px";
		this._y = y;
		
		this._moveContent();
	};
	this._moveContent = function () {
		this._src.scrollTo(0, Math.round(this._y * this._ratio));
	};
	
	this.scrollBy = function (x, y) {
		this._scroll(0, (-this._src._y + y)/this._ratio);
	};
	this.scrollTo = function (x, y) {
		this._scroll(0, y/this._ratio);
	};
	this.swapContent = function (o, w, h) {// 判断浏览器
		if(window.event){ 
			this._removeEvent(this._src.content, "mousewheel", this._scrollbarWheel, false);
		}//W3C 
		else{
			this._removeEvent(this._src.content, "DOMMouseScroll", this._scrollbarWheel, false);
		}
		
		this._src.swapContent(o, w, h);
		this.reset();
	};
	
	this.reset();
};

</script>
</head>

<body>

<div class="box">
    <div class="Container">
      <div id="Scroller-1">
       <div style="left: 0px; top: -596px;" class="Scroller-Container">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
     iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo 
    ligula enim ac justo. Pellentesque id ligula. Class aptent taciti 
    sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
    Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam 
    blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, 
    condimentum non, ullamcorper eu, neque. In hac habitasse platea 
    dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, 
    libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, 
    dolor ligula ultrices neque, in elementum ante erat et elit.</p>
          <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium 
    sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. 
    Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam 
    eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin 
    neque. Aliquam erat volutpat. Pellentesque felis.</p>
          <p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse 
    mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, 
    elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac 
    habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. 
    Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, 
    consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. 
    Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
     iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo 
    ligula enim ac justo. Pellentesque id ligula. Class aptent taciti 
    sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
    Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam 
    blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, 
    condimentum non, ullamcorper eu, neque. In hac habitasse platea 
    dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, 
    libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, 
    dolor ligula ultrices neque, in elementum ante erat et elit.</p>
          <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium 
    sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. 
    Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam 
    eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin 
    neque. Aliquam erat volutpat. Pellentesque felis.</p>
          <p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse 
    mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, 
    elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac 
    habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. 
    Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, 
    consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. 
    Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
        </div>
      </div>
    </div>
  <div style="visibility: visible;" id="Scrollbar-Container">
    <div class="Scrollbar-Track">
      <div style="top: 70px; left: 0px; visibility: visible;" class="Scrollbar-Handle"></div>
    </div>
  </div>
</div>


</body>

</html>

分享到：

JS+SWF实现浏览器复制 | jQuery替换element元素上已经绑定的事件

2011-12-17 17:44
浏览 4998
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

滚动条(兼容火狐、IE、chrome)[同事修改jsScrollbar]

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

滚动条(兼容火狐、IE、chrome)[同事修改jsScrollbar]

评论

发表评论

相关推荐

nginx 配置.json文件直接访问，不下载

PHP 常见算法【冒泡排序, 快速排序, 插入排序, 选择排序, 二分法查找, ..】

牛年求牛：有一母牛，到4岁可生育，每年一头，所生均是一样的母牛，到15岁绝育，不再能生，20岁死亡，问n年后有多少头牛

PHP 递归实现层级树状展现数据

看到PHP的一道面试题, 做了下, 不知道还有没好点方法

JS 非贪婪模式详解

[转帖] js apply/call/caller/callee/bind使用方法与区别分析

用P3P header解决iframe跨域访问cookie

[转载]IE6:display:inline-block解决方案

ColorPicker(Fix IE6) 取色器

[转载]修正IE6不支持position:fixed的bug

CSS 点点

提示浮层跟随鼠标移动

解决在iframe页面里使用了DD_belatedPNG后显示空白的bug

iframe或colorbox 父子窗口调用的方法

用js实现页面跳转的5种方法

JS浏览器检测

[转载]DIV浮动层被FLASH挡住的简单解决方法

JS+SWF实现浏览器复制

jQuery替换element元素上已经绑定的事件

最近访客更多访客>>