波斯马BOSSMA Information Technology

Javascript模拟滚动条

发布时间:2010年5月11日 / 分类:JavaScript / 16,868 次浏览 / 评论

如果你想自定义你的滚动条样式,以前的方法是设置scrollbar样式,如:

scrollbar-arrow-color: #CAAAAA;? /*三角箭头的颜色*/

但是好像只有IE支持,兼容性不好。

推荐另外一种办法,通过javascript模拟滚动条的样式和事件,兼容IE和firefox,其他浏览器未测试。

这个例子来源于网络,我做了一些修改,实现了鼠标拖动、鼠标滚动、点击拖动,需要看原文的点这两个链接:

http://www.eb163.com/club/thread-5653-1-1.html

http://www.aspxhome.com/download/javascript/200911/1137621.htm

我用到了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>Javascript模拟滚动条</title>
<style type="text/css">
??????? .QJscroll_left
??????? {
??????????? height: 100%;
??????????? overflow: hidden;
??????????? float: left;
??????????? padding: 0;
??????????? margin:0;
??????? }
??????? .QJscroll_right
??????? {
??????????? height: 100%;
??????????? overflow: hidden;
??????????? float: right;
??????????? width: 16px;
??????????? background: #f1f1f1;
??????? }
??????? .QJscroll_right div
??????? {
??????????? overflow: hidden;
??????????? width: 100%;
??????? }
??????? .QJscroll_but
??????? {
??????????? height: 16px;
??????????? background: url(images/icon_up.gif) 2px 1px;
??????? }
??????? .QJscroll_down
??????? {
??????????? height: 16px;
??????????? background: url(images/icon_down.gif) 2px 2px;
??????? }
??????? .QJscroll_cen
??????? {
??????????? position: relative;
??????????? margin: 1px 0px 1px 0px;
??????? }
??????? .QJscroll_box
??????? {
??????????? position: absolute;
??????????? z-index: 1;
??????????? left: 0px;
??????????? background-image: url(images/icon_bg.gif);
??????? }
??????? .LeftMenu a{
??????? padding:0;margin:0;
??????? }
??? </style>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="demo1" style="width:400px;height:300px;background:#ffffff"> 曾经有各种各样的生物生活在这块大陆。在这片土地上生存了几千年的居民的力量在其中最为弱小。面对凶猛的野兽和那些有着超自然能力怪物,他们被迫建立了各种宗派,以便去抵抗,去抗争那些把自己当做食物的野兽和怪兽。<br />
? <br />
? 在不停的抗争中,居民把所有战斗经验汇编成册,武学由此诞生。并且把拥有武学的人尊称为武者,最终依靠武者们的齐心合力,凶猛的野兽被消灭,超自然能力的怪物也被赶出了大陆,给大陆带来了几千年的和平,武者成为这个大陆最为尊贵的称号。<br />
? <br />
? 在那以后,成为武者就成了这块大陆居民追求的目标。习武之人一生奉献全给武学 ,为了自创新的武功,达到一流高手的境界,耗损人生年华。但是对于武者来说,没有什么比"天下第一"这个称号更值得追求的了。试想天下武者提起你来,莫不肃然起敬,唯你是尊,是何等惬意!武学修炼之路须持之以恒的修炼和无数次的实战,才能成为高手,武学所追求的最终境界欲进一步犹如登天。<br />
? <br />
? 当世五大绝世高手为了证明自己是“天下第一”,不惜反目成仇,在洪山之颠斗了七天七夜,在这场惨烈的大战之后,受到重创的五大高手痛定思痛,一直认为所有祸根都源于武学典籍;自己的所作所为已经偏出了武道的本义,武学一道存在本义“止戈”,但现在却成了争斗名利的工具。<br />
? <br />
? 要知道,“正邪本同源,善恶一念间”,曾经的他们都是并肩作战的好伙伴,使人不得不感叹“剑有双刃,其利有弊”!他们支撑着残喘之躯,封藏了各自手上的武学秘籍,不再外传。想从根源上避免后人重蹈覆辙。<br />
? <br />
? 但是江湖永远都不是一个可以平静的地方,以江湖为名,可能也正是印证了武林与江河湖海一样奔流间变化,绝不停顿。<br />
? <br />
? 故事就从这里开始。<br />
? <br />
? 一页失落的武学无意中被人发现。这传说中存在的武功精要再一次的引起了武林人士的垂涎。因为在后来的传言中,只要观其一页就根据自身武功而自创新的武功而开宗立派,名震江湖。绝世高手如能阅读其书,可以突破自身瓶径,以一已破万敌,最终白日飞升。江湖中人居然为其得到残页,得到“天下第一”,处心积虑,寝食难安,疯狂者六亲不认,众叛亲离,妄送性命。江湖曾经的宗派因此凋零而消亡,失去宗派的江湖开始失去了秩序。<br />
? <br />
? 某天,一个个村庄里,都响起了钟声,钟声在宁静的村庄里显的格外刺耳。千年未响的钟声响起了,这是镇魔钟发出的声音,预示着消失千年的食人怪物又回来了,这是又将面临战斗的号声。<br />
? <br />
? “血剑横空染凡尘,玄天魔血洒穹州!”<br />
? <br />
? 妖魔将现,天下庶民即将陷入战斗的旋涡,血光将再次笼罩于天下……<br />
? <br />
? 危急!危急!没有宗派存在的江湖,已汇集不出力量去抗衡重新回来的怪物。“如何才是天下第一?”, “生存还是毁灭”,很多人都在思考。<br />
? <br />
? 天未亮,面临战斗的号声,村庄里的很多年轻人,踏着坚定的脚步,纷纷告别了自己成长的村庄。离开时皆立下誓言,愿以自己的满腔热血把怪物赶出大陆。<br />
? <br />
? 面对黑夜,他们即将开始自身漫长艰苦的修炼,追寻武学的本义,组织自己的宗派,如前人般再次为“武者”这个称呼,重新证明,将怪物赶出大陆,重新给大陆带来和平。<br />
? <br />
? 一道道流星划开那黑色夜幕,黎明的到来还远吗...... </div>
<br />
<button onclick="QJ.seroInner('demo1','0<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>99999999')">更改demo内容</button>
<br/>
<script type="text/javascript">

?window.onload = function() {
?//设置要使用滚动条的对象,一般为div
??????????? QJ.addScro('demo1');
??????? }

//鼠标滑轮滚动的事件,默认滚动条随鼠标滑轮的滚动
??????? var scrollFunc = function(e) {
??????????? QJ.addScroChe(e, "", 4);
??????? }

//简洁的获取一个对象,和jqeury的$区分开
??????? function $QJ(a) { return document.getElementById(a) };

??????? var QJ = {};

??//初始化设置滚动条的区域
??????? QJ.addScro = function(a) {
??????????? $QJ(a).style.overflow = "hidden";

???//获取该区域的高度、宽度,有时候可能需要过滤px
??????????? var _width = $QJ(a).clientWidth;
??????????? var _height = $QJ(a).style.height.toString();
??????????? _height = _height.replace("px", "");
??????????? _height = Number(_height);

//替换区域内的内容
??????????? var html = "<div id=\"" + a + "_left\" class=\"QJscroll_left\" style=\"width:" + (_width - 16) + "px;\">" + $("#"+a).html() + "</div>";
??????????? html += "<div id=\"" + a + "_right\" class=\"QJscroll_right\">";
??????????? html += "<div id=\"" + a + "_top\" class=\"QJscroll_but\" onmouseover=\"\" onmousedown=\"QJ.addScroChe(-5,'" + a + "',5)\" onmouseup=\"\"></div>";
??????????? html += "<div id=\"" + a + "_cen\" class=\"QJscroll_cen\" style=\"height:" + (_height - 34) + "px\">";
??????????? html += "<div id=\"" + a + "_box\" class=\"QJscroll_box\" style=\"top:0px\" onmousedown=\"QJ.addScroChe(event,'" + a + "',2)\" onmouseover=\"\" onmouseout=\"\" onmouseup=\"\"></div>"
??????????? html += "</div><div id=\"" + a + "_foot\" class=\"QJscroll_down\" onmouseover=\"\" onmouseout=\"\" onmousedown=\";QJ.addScroChe(5,'" + a + "',5)\" onmouseup=\"\"></div>";
??????????? html += "</div>";
??????????? $("#" + a).html(html);

//绑定鼠标滑轮滚动事件,firefox支持:DOMMouseScroll,其它一般是:mousewheel
??????????? $("#" + a + "_left").bind("DOMMouseScroll", function(event) { scrollFunc(event) });
??????????? $("#" + a + "_left").bind("mousewheel", function(event) { scrollFunc(event) });

//设置滚动条初始位置
??????????? QJ.addScroChe("", a, 1);
??????? };

??????? var QJScrolling = "", QJScrollNum, QJScrollTimer;
??????? document.onmousemove = function(e) { if (QJScrolling != "") QJ.addScroChe(e, QJScrolling, 3) };
??????? document.onmouseup = function(e) { QJScrolling = ""; clearTimeout(QJScrollTimer) };

??????? QJ.addScroChe = function(a, b, c) {
??????????? switch (c) {
??????????????? case 1:
??????????????????? $QJ(b + "_left").scrollTop = 0;
??????????????????? var H = $QJ(b + "_left").clientHeight / $QJ(b + "_left").scrollHeight;
??????????????????? $QJ(b + "_left").scrollTop = 0;
??????????????????? if (H >= 1) { $QJ(b + "_box").style.display = "none" } else { $QJ(b + "_box").style.display = ""; $QJ(b + "_box").style.height = parseInt(H * $QJ(b + "_cen").clientHeight) + "px"; $QJ(b + "_box").style.top = "0px" };
??????????????????? break;
??????????????? case 2:
??????????????????? QJScrolling = b;
??????????????????? var event = a || window.event;
??????????????????? QJScrollNum = event.clientY - parseInt($QJ(QJScrolling + "_box").style.top);
??????????????????? break;
??????????????? case 3:
??????????????????? var event = a || window.event;
??????????????????? QJ.addScroChe(event.clientY - QJScrollNum, b, 0)
??????????????????? break;
??????????????? case 4://鼠标滑轮滚动操作
??????????????????? var event = a || window.event;
??????????????????? var ele = event.currentTarget || event.activeElement;
??????????????????? if (ele.className != "QJscroll_left") return;
??????????????????? b = ele.id.split("_left")[0];
??????????????????? var H = $QJ(b + "_left").scrollTop;
??????????????????? if (event.wheelDelta <= 0 || event.detail > 0) { H = H + 80 } else { H = H - 80 };
??????????????????? try { event.preventDefault() } catch (err) { event.returnValue = false };
??????????????????? var H2 = $QJ(b + "_left").scrollHeight - $QJ(b + "_left").clientHeight;
??????????????????? if (H < 0) H = 0; if (H > H2) H = H2;
??????????????????? var H3 = H / H2 * ($QJ(b + "_cen").clientHeight - $QJ(b + "_box").clientHeight);
??????????????????? $QJ(b + "_left").scrollTop = H;
??????????????????? $QJ(b + "_box").style.top = H3 + "px";
??????????????????? break;
??????????????? case 5:
??????????????????? clearTimeout(QJScrollTimer);
??????????????????? QJ.addScroChe(parseInt($QJ(b + "_box").style.top) + a, b, 0)
??????????????????? QJScrollTimer = window.setTimeout("QJ.addScroChe(" + a + ",'" + b + "',5)", 20);
??????????????????? break;
??????????????? case 0:
??????????????????? var H = $QJ(b + "_cen").clientHeight - $QJ(b + "_box").clientHeight;
??????????????????? if (a < 0) a = 0; if (a > H) a = H;
??????????????????? var H2 = a / H * ($QJ(b + "_left").scrollHeight - $QJ(b + "_left").clientHeight);
??????????????????? $QJ(b + "_box").style.top = a + "px";
??????????????????? $QJ(b + "_left").scrollTop = H2;
??????????????????? break;
??????????? };
??????? };
??????? QJ.seroInner = function(a, b) {
??????????? $QJ(a + "_left").innerHTML = b;
??????????? QJ.addScroChe("", a, 1);
??????? };
</script>
</body>
</html>

需要代码的朋友,点击这里下载例子。有问题,欢迎与我交流。

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自波斯马,原文地址《Javascript模拟滚动条

关键字:

建议订阅本站,及时阅读最新文章!
【上一篇】 【下一篇】

目前有4 条评论

  1. 流落幸福 0楼:

    为什么只能使用你提供的jQuery.js库,使用其他版本的就会出问题,鼠标不能正常滚动???

  2. bossma 0楼:

    @ling
    可以的,我在左边放了一个树型菜单,可以触发click事件。可以把你的例子发给我看看。

  3. ling 0楼:

    好像左侧的主要内容写click事件没有用

发表评论