如果你想自定义你的滚动条样式，以前的方法是设置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>
需要代码的朋友，点击这里下载例子。有问题，欢迎与我交流。
为什么只能使用你提供的jQuery.js库，使用其他版本的就会出问题，鼠标不能正常滚动？？？
可能是jquery的一些函数不支持了，建议调试下看看，时间太久了忘了怎么做的了。
@ling
可以的，我在左边放了一个树型菜单，可以触发click事件。可以把你的例子发给我看看。
好像左侧的主要内容写click事件没有用
发表评论
相关文章
国内AI资源汇总，AI聊天、AI绘画、AI写作、AI视频、AI设计、AI编程、AI音乐等，国内顺畅访问，无需科学上网。
扫码或点击进入：萤火AI大全
文章分类
最新评论