自定义滚动条实现-优快云博客

本文链接：https://blog.youkuaiyun.com/shuizhiyun/article/details/7085018
<html>
<script>

function OnDocLoad()
{
	TinyScrollbar.setContentHeight(contentSpan.style.height);
	TinyScrollbar.setScreenHeight(screenSpan.style.height);
	TinyScrollbar.setScreenTop(screenSpan.style.top);
	TinyScrollbar.adjustHeight();
}

function DebugInfo(strMsg)
{
	var str = Msg.innerHTML + "";
	if (str.length > 200)
		str = "";
	
	Msg.innerHTML = str + strMsg + "<br />";
}

function OnLBtnDown()
{
	TinyScrollbar.OnLBtnDown(event);
}
function OnLBtnUp()
{
	TinyScrollbar.OnLBtnUp(event);
}
function OnMuseMove()
{
	TinyScrollbar.OnMouseMove(event);
}
 
	var TinyScrollbar = {
		left:0,
		top:0,
		width:0,
		height:0,
		screenTop:0,
		contentHeight:0,
		screenHeight:0,
		contentTop:0,
		origY:0,
		graspScrollbar:false,
		calcHeight:function(contentHeight, screenHeight)
		{
			if (contentHeight <= screenHeight) {
				return 0;
			} else {
				return screenHeight * screenHeight / contentHeight;
			}
		},
		setContentHeight:function(contentHeight)
		{
			this.contentHeight = parseInt(contentHeight);
			
		//	this.OnContentHeightChange(contentHeight);
		},
		setScreenHeight:function(screenHeight)
		{
			this.screenHeight = parseInt(screenHeight);
		},
		adjustHeight:function()
		{
			Msg.innerHTML = Msg.innerHTML + "contentHeight:" + this.contentHeight + ",screenHeight:" + this.screenHeight + "<br />";
			this.height = this.calcHeight(this.contentHeight, this.screenHeight);
		//	alert("this.height:" + this.height);
			
			Msg.innerHTML = Msg.innerHTML + "height:" + this.height + "<br />";
			scrollbarSpan.style.height = this.height;
		},
		setScreenTop:function(screenTop)
		{
			this.screenTop = parseInt(screenTop);
			
		//	scrollbarSpan.style.posTop = this.screenTop;
		},
		changeTop:function(absoluteTop)
		{
		//	DebugInfo("absoluteTop:" + absoluteTop + ", screenTop:" + this.screenTop + ", screenHeight:" + this.screenHeight + ",height:" + this.height);
			DebugInfo("absoluteTop:" + absoluteTop + ", screenTop:" + this.screenTop + ", screenHeight:" + this.screenHeight + ",height:" + this.height + ",contentHeight:" + this.contentHeight);
			if (absoluteTop < this.screenTop)
				absoluteTop = this.screenTop;
			
			if (absoluteTop > this.screenHeight - this.height + this.screenTop)
				absoluteTop = this.screenHeight - this.height + this.screenTop;
			
			
			this.top = absoluteTop;
			this.contentTop = this.screenTop - this.contentHeight * (this.top - this.screenTop) / this.screenHeight; 
			DebugInfo(absoluteTop + ", contentTop:" + this.contentTop);
			
			scrollbarSpan.style.posTop = this.top;
			contentSpan.style.posTop = this.contentTop;
			
		//	alert("top:" + this.top + "," + this.contentTop);
		},
		OnContentTopChange:function(contentTop)
		{
			this.contentTop = contentTop;
			this.top = (this.screenTop - contentTop) * this.screenHeight / this.contentHeight + this.screenTop;

			scrollbarSpan.style.posTop = this.top;
			contentSpan.style.posTop = this.contentTop;
		},
		OnContentHeightChange:function(contentHeight)
		{
			this.contentHeight = contentHeight;
			this.adjustHeight();
			this.OnContentTopChange(this.contentHeight);
			
			contentSpan.style.height = this.contentHeight;
		},
		SetOrigDownTop:function(origY)
		{
			this.origY = origY;
		},
		OnLBtnDown:function(e)
		{
			var left = e.clientX;
			var top = e.clientY;
			
		//	Msg.innerHTML = Msg.innerHTML + "(" + left + "," + top + ")   (" + scrollbarSpan.style.posLeft + "," + scrollbarSpan.style.posTop
		//						+ "," + parseInt(scrollbarSpan.style.width) + "," + parseInt(scrollbarSpan.style.height) + ")<br />";

			if (left > scrollbarSpan.style.posLeft && left < scrollbarSpan.style.posLeft + parseInt(scrollbarSpan.style.width)
				&& top > scrollbarSpan.style.posTop && top < scrollbarSpan.style.posTop + parseInt(scrollbarSpan.style.height)) {
				this.graspScrollbar = true;
				this.SetOrigDownTop(e.clientY - scrollbarSpan.style.posTop);
			}
		},
		OnLBtnUp:function(e)
		{
			this.graspScrollbar = false;
		},
		OnMouseMove:function(e)
		{
			if (!this.graspScrollbar)
			  return;

			this.changeTop(e.clientY - this.origY);
		}
	};
	
</script>
<body onload="OnDocLoad()" onmousedown="OnLBtnDown()" onmouseup="OnLBtnUp()" onmousemove="OnMuseMove()">
<span id="screenSpan" name="screenSpan" style="position:absolute;left:30px;top:300px;width:100px;height:100px;background-color:yellow;"></span>
<span id="contentSpan" name="contentSpan" style="position:absolute;background-color:red;left:30px;top:300px;width:100px;height:200px;filter:Alpha(Opacity=30);"></span>
<span id="scrollbarBkSpan" name="scrollbarBkSpan" style="position:absolute;background-color:orange;left:130px;top:300px;width:10px;height:100px;"></span>
<span id="scrollbarSpan" name="scrollbarSpan" style="position:absolute;background-color:lime;left:130px;top:300px;width:10px;height:50px;"></span>

<span id="block1" name="block1" style="position:absolute;background-color:red;filter:Alpha(Opacity=30);display:block;"></span>

<!--table background="cover.jpg" border="0" cellpadding="0" cellspacing="0" id=tbl>
  <tr><td id="ovv" name="ovv" width=200 height=200></td><tr>
</table-->

<!--img id="cover" name="cover" src="cover.jpg"  /><!--style="display:none"-->
<div id="Msg"></div>
</body>
</html>
模拟滚动条
