模拟滚动条

最新推荐文章于 2024-10-07 09:24:46 发布

iteye_12132

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量104

点赞数

分类专栏： JavaScript CSS javascript-半成品文章标签： javascript ViewUI

JavaScript 同时被 3 个专栏收录

117 篇文章 0 订阅

订阅专栏

CSS

35 篇文章 0 订阅

订阅专栏

javascript-半成品

11 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link type="text/css" rel="styleSheet" href="base.css"/>

<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<style>
	#wrapper{width:300px;background: #ff0;position:fixed;right:10px;top:20px;bottom:0;color:#fff;}
        #wrapper{*height:100%;}
	.box{overflow: hidden;position: relative;height:100%;}
	.box ul{height:1200px;background:#006600;border:1px solid #FABE28;}
	.fakebar{position:absolute;top:0;right:5px;height:50%;width:15px;background:#ccc;opacity:0.5;
		border-radius:8px;
		}
</style>
</head>
<body>

<div id="wrapper">
	<div class="box">
		<ul>
			<li>啊啊飞ffe</li>
			<li>试试方法</li>
			<li>啊啊飞ffe</li>
			<li>试试方法</li>
			<li>啊啊飞ffe</li>
			<li>试试方法</li>
			<li>啊啊飞ffe</li>
			<li>试试方法</li>
			<li>啊啊飞ffe</li>
			<li>试试方法</li>
			<li>啊啊飞ffe</li>
			<li>试试方法</li>
			<li>啊啊飞ffe</li>
			<li>试试方法</li>
			<li>啊啊飞ffe</li>
			<li>试试方法</li>
			<li>啊啊飞ffe</li>
			<li>试试方法</li>
			<li>啊啊飞ffe</li>
			<li>试试方法</li>
			<li>啊啊飞ffe</li>
			<li>试试方法</li>
			<li>啊啊飞ffe</li>
			<li>试试方法</li>
			<li>啊啊飞ffe</li>
			<li>试试方法</li>
			<li>啊啊飞ffe</li>
			<li>试试方法</li>
			<li>啊啊飞ffe</li>
			<li>试试方法</li>
			<li>啊啊飞ffe</li>
			<li>试试方法</li>
			<li>啊啊飞ffe</li>
			<li>试试方法</li>
			<li>啊啊飞ffe</li>
			<li>试试方法</li>
			<li>啊啊飞ffe</li>
			<li>试试方法</li>
			<li>啊啊飞ffe</li>
			<li>试试方法</li>
			<li>啊啊飞ffe</li>
			<li>试试方法</li>
		</ul>
		<div class="fakebar"></div>
	</div>
</div>
<script>

var $ = jQuery;
var boxEl = $(".box").get(0);
var $ulEl = $(".box ul");
var $barEl = $(".fakebar");

var hiddenH = 0;
var spaceH = 0;
var h0 = 0;
var h1 = 0;
var step = 20;
var barStep = 0;

function scrollFunc(e){
    if(e.wheelDelta){
        //W3C 向上120/向下-120,opera 在V9.5之前的取值是反的。
        return window.opera && window.opera.ver < 9.5 ? -e.wheelDelta:e.wheelDelta;
    }else if(e.detail){
         // firefox : 向上-3/向下3
 	 return e.detail * -40;
    }
}
function bindMousewheel(el,fn){
	 var callback = function(e){
	 	fn(scrollFunc(e));
	 };
	 if(document.addEventListener){//W3C
	     el.addEventListener('DOMMouseScroll',callback,false);//firefox
	     el.addEventListener('mousewheel',callback,false);//IE8+,Opera,Chrome
	 }else if(document.attachEvent){
		 el.attachEvent('onmousewheel',callback);
	 }
}
function computeStep(){
		h0 = 0;
		h1 = 0;
		//滚动条高度
		var barH = parseInt($barEl.height(),10);

		//滚动条的空白高度
		spaceH = boxEl.clientHeight - barH;

		//内容被hidden的高度
		hiddenH = boxEl.scrollHeight - boxEl.clientHeight;

		//计算滚动条的步长
		barStep = spaceH/(hiddenH/step);
}	
function scrollPos(delta){
	if(delta === -120){ //向下滚动
		h0 += step;
		h0 = Math.min(h0,hiddenH);

		h1 += barStep;
		h1 = Math.min(h1,spaceH);
	}else{//向上滚动
		h0 -= step;
		h0 = Math.max(h0,0);

		h1 -= barStep;
		h1 = Math.max(h1,0);
	}
	$ulEl.css("marginTop",-h0);
	$barEl.css("top",h1);
}

	jQuery(function(){
		$(window).resize(function(){
			computeStep();
			//简单重置偏移。最好能优化一下，保留当前位置
			$ulEl.css("marginTop",0);
			$barEl.css("top",0);
		});
		computeStep();
		bindMousewheel(boxEl,scrollPos);
	});
</script>
</body>
</html>