如何自定义滚动条

<!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>

如何自定义滚动条

猜你喜欢