<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>自定义滚动条</title> <style> #div1{width:600px;height:30px;background:#360;;position:relative;margin:10px auto;} #div2{width:30px;height:30px;background:red;position:absolute;left:0;top:0;} #div3{width:300px;height:300px;border:1px solid black;background:#093;position:relative;overflow:hidden;} #div4{position:absolute;top:0;color:#fff;font-size:16px;font-family:‘仿宋‘;margin:2px;left:0;padding:4px;} </style> <script> window.onload=function() { var oDiv1=document.getElementById(‘div1‘); var oDiv=document.getElementById(‘div2‘); var oDiv3=document.getElementById(‘div3‘); var oDiv4=document.getElementById(‘div4‘); var disX=0; //div的鼠标按下事件，主要计算鼠标当前位置，和移动位置。这样可以计算出鼠标移动速度。 oDiv.onmousedown=function(ev) { var oEvent=ev||event; //为了兼容各种浏览器 disX=oEvent.clientX-oDiv.offsetLeft; //鼠标的位置-div的位置 document.onmousemove=function(ev) { //鼠标拖动事件。 var oEvent=ev||event; var l=oEvent.clientX-disX; if(l<0) //用户把div丛左边拖出屏幕 { l=0; } else if(l>oDiv1.offsetWidth-oDiv.offsetWidth) //用户把div从右边拖出屏幕 { l=oDiv1.offsetWidth-oDiv.offsetWidth; } oDiv.style.left=l+‘px‘; var scale=l/(oDiv1.offsetWidth-oDiv.offsetWidth); document.title=scale; oDiv4.style.top=-scale*(oDiv4.offsetHeight-oDiv3.offsetHeight)+‘px‘; }; document.onmouseup=function() { //当鼠标抬起后，清掉移动事件。 document.onmousemove=null; document.onmouseup=null; }; return false; //阻止默认行为 }; }; </script> </head> <body style="height:2000px;background:#ccc;"> <div id="div1"> <div id="div2"></div> </div> <div id="div3"> <div id="div4"> 在我们面前是迷人的大海 在我们心灵是精彩的世界。我骄傲，因为我有一个美好的青春。 青春，一个被赋予太多憧憬与希望的词汇。在很多人眼里青春如火，燃烧着激情与 活力；青春如花，绽放着智慧和希望。但在我的眼里，青春就如一只迷途的鹿，徘徊在人生 的十字路口，前路是满布的荆棘 青春的路上充满了彷徨。青春的热血在我们的身体中流淌，叛逆的力量在沉默中爆 发。叛逆、嚣张、标新立异···是我们的标识。我们渴望成长，渴望挣脱种种的束缚，却 又羽翼未丰。我们渴望能够独当一面，渴望被认可，却又能力不足。我们有满腔的激情与理 想，可又无法释放。于是，我们纷纷发表独立宣言，希望得到成人世界的认可，我们纷纷反 抗，希望挣脱束缚。我们徘徊在梦想与堕落的边缘，不知路在何方。 迷茫中，蓦然抬头，一群大雁缓缓地飞过。我心中一动，他们不断地迁徙，从南方 飞到北方， 又从北方飞回南方。 这就是信念的力量！ 他们为了心中的同一个理想与信念聚集,在一起， 一起排除万难去完成心中的理想。 我们又何尝不是这样？是的， 信念就如一盏明灯， 在我们彷徨的时候照亮我们前进的方向。君不见我们的前途是如此光明和坦荡 、初三，青春年华，我们有梦想与激情！更有初生牛犊不怕虎的勇气！我们敢拼，我 们赢得起！哪怕撞得头破血流又何妨！青春的路上我们绝不彷徨！ </div>
</div>
效果图如下：字随着导航条的滑动而滚动
<audio autoplay="" loop=""><source src="http://www.kugou.com/song/#hash=4F76587A5B0B93EEF15883E54DD3E2DB&album_id=2900867"></audio> </body> </html>
原文：https://www.cnblogs.com/wuyougougou970301/p/9072606.html