首页 > 代码库 > 模拟滚动条

模拟滚动条

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>模拟滚动条</title>
<style type="text/css">
body, div {
    margin:0;
    padding:0;
}
.scrollbar {
    width:300px;
    height:300px;
    border:2px solid #CCF;
    margin:100px auto;
    position:relative;
    overflow:hidden;
}
.scroll {
    position:absolute;
    top:0;
    left:0;
    background:#f2f2f2;
    color:#F00;
    padding:0 10px;
    line-height:24px;
    font-size:13px;
    margin-right:10px;
}
.barwrap {
    width:10px;
    height:100%;
    position:absolute;
    right:0;
    top:0;
    background:#C69;
}
.bar {
    position:absolute;
    top:0;
    left:0;
    width:10px;
    height:10px;
    background:#03F;
}
</style>
</head>
<body>
<div class="scrollbar" id="scrollbar">
  <div class="scroll" id="scroll">
    <p>日前,国际知名反病毒评测机构AV-C发布最新一期手动扫描测试报告,国内360杀毒软件以99.5%的高查杀率和极少误报被AV-C评为最佳级别(Advanced+)。在不久前AV-C发布的动态防护评测中,360杀毒则是唯一得分超过99%的国产安全软件。</p>
    <p> 据了解,参与本次测试的国内外安全产品共23款,其中国内安全产品4款。由于金山毒霸使用未公开版本在评测中作弊,被AV-C评测机构取消了成绩,百度杀毒则排名垫底没有获得认证。 </p>
    <p> AV-C手动扫描主要通过详细测试安全软件的查杀比率、误报数量,考验安全软件的扫描查杀能力,360杀毒等多款国内杀毒软件均在此项测试中达到99%以上的查杀率。不过对普通用户来说,杀毒软件的防护能力更为重要。在AV-C对杀毒软件的防护能力评测中,仅有360杀毒对病毒拦截率超过99%,排名占据前列;腾讯等其他国产软件则排名倒数。 </p>
    <p> 随着微软对Windows XP停止服务支持,安全软件对XP的防护能力成为行业关注的焦点。在此前国内举办的首个XP挑战赛中,腾讯和金山相继在一两分钟内被黑客攻破,之后又陆续被多人次攻破,360XP盾甲则成功防御了所有黑客攻击。 </p>
    <p> 而在国际知名机构COSEINC发布的XP漏洞防护评测报告中,360同样以100%的防御成功率排名第一,德国的Avira和俄罗斯的卡巴斯基分别名列第二和第三;腾讯电脑管家和金山毒霸则双双垫底,拦截率仅为33%,表现远低于63%的平均水平。 </p>
      <p>日前,国际知名反病毒评测机构AV-C发布最新一期手动扫描测试报告,国内360杀毒软件以99.5%的高查杀率和极少误报被AV-C评为最佳级别(Advanced+)。在不久前AV-C发布的动态防护评测中,360杀毒则是唯一得分超过99%的国产安全软件。</p>
    <p> 据了解,参与本次测试的国内外安全产品共23款,其中国内安全产品4款。由于金山毒霸使用未公开版本在评测中作弊,被AV-C评测机构取消了成绩,百度杀毒则排名垫底没有获得认证。 </p>
    <p> AV-C手动扫描主要通过详细测试安全软件的查杀比率、误报数量,考验安全软件的扫描查杀能力,360杀毒等多款国内杀毒软件均在此项测试中达到99%以上的查杀率。不过对普通用户来说,杀毒软件的防护能力更为重要。在AV-C对杀毒软件的防护能力评测中,仅有360杀毒对病毒拦截率超过99%,排名占据前列;腾讯等其他国产软件则排名倒数。 </p>
    <p> 随着微软对Windows XP停止服务支持,安全软件对XP的防护能力成为行业关注的焦点。在此前国内举办的首个XP挑战赛中,腾讯和金山相继在一两分钟内被黑客攻破,之后又陆续被多人次攻破,360XP盾甲则成功防御了所有黑客攻击。 </p>
    <p> 而在国际知名机构COSEINC发布的XP漏洞防护评测报告中,360同样以100%的防御成功率排名第一,德国的Avira和俄罗斯的卡巴斯基分别名列第二和第三;腾讯电脑管家和金山毒霸则双双垫底,拦截率仅为33%,表现远低于63%的平均水平。 </p>
      <p>日前,国际知名反病毒评测机构AV-C发布最新一期手动扫描测试报告,国内360杀毒软件以99.5%的高查杀率和极少误报被AV-C评为最佳级别(Advanced+)。在不久前AV-C发布的动态防护评测中,360杀毒则是唯一得分超过99%的国产安全软件。</p>
    <p> 据了解,参与本次测试的国内外安全产品共23款,其中国内安全产品4款。由于金山毒霸使用未公开版本在评测中作弊,被AV-C评测机构取消了成绩,百度杀毒则排名垫底没有获得认证。 </p>
    <p> AV-C手动扫描主要通过详细测试安全软件的查杀比率、误报数量,考验安全软件的扫描查杀能力,360杀毒等多款国内杀毒软件均在此项测试中达到99%以上的查杀率。不过对普通用户来说,杀毒软件的防护能力更为重要。在AV-C对杀毒软件的防护能力评测中,仅有360杀毒对病毒拦截率超过99%,排名占据前列;腾讯等其他国产软件则排名倒数。 </p>
    <p> 随着微软对Windows XP停止服务支持,安全软件对XP的防护能力成为行业关注的焦点。在此前国内举办的首个XP挑战赛中,腾讯和金山相继在一两分钟内被黑客攻破,之后又陆续被多人次攻破,360XP盾甲则成功防御了所有黑客攻击。 </p>
    <p> 而在国际知名机构COSEINC发布的XP漏洞防护评测报告中,360同样以100%的防御成功率排名第一,德国的Avira和俄罗斯的卡巴斯基分别名列第二和第三;腾讯电脑管家和金山毒霸则双双垫底,拦截率仅为33%,表现远低于63%的平均水平。 </p>
  </div>
  <div class="barwrap" id="barwrap">
    <div class="bar" id="bar"></div>
  </div>
</div>
</body>
</html>
<script type="text/javascript">
    var scrollbar=document.getElementById("scrollbar");
    var scrolls=document.getElementById("scroll");
    var barwrap=document.getElementById("barwrap");
    var bar=document.getElementById("bar");
    
    
    
    var scrollbarHeight=scrollbar.offsetHeight;
    //var barHeight=bar.offsetHeight;
    var barwrapHeight=barwrap.offsetHeight;
    var scrollHeight=scrolls.offsetHeight;
    var scrollbarHeight=scrollbar.offsetHeight;
    
    var barHeight=scrollbarHeight/scrollHeight*barwrapHeight
    
    if(barHeight<10){
        barHeight=10;
    }
    
    bar.style.height=barHeight+"px";
    

    var bartop=bar.offsetTop;
    bar.onmousedown=function(e){
        var e=e||event;
        var barTop=bar.offsetTop;
        var disY=e.clientY-barTop;
        document.onmousemove=function(e){
            var e=e||event;
            barTop2=e.clientY-disY;
            if(barTop2<0){
                barTop2=0;
            }
            if(barTop2>(barwrapHeight-barHeight)){
                barTop2=barwrapHeight-barHeight
            }
            bar.style.top=barTop2+"px";
            depo(barTop2)
        }
        document.onmouseup=function(){
            document.onmousemove=null;
            document.onmouseup=null;
            }
        return false;
    }
    
    barwrap.onclick=function(e){
        var e=e||event;
        var disY2=e.clientY-scrollbar.offsetTop-bar.offsetHeight/2;
        bar.style.top=disY2+"px";
        depo(disY2)
    }
    
    function depo(po){
        if(po<0 || po==0){
                po=0;
            }
            if(po>(barwrapHeight-barHeight)){
                po=barwrapHeight-barHeight;
            }
        var ji=(barwrapHeight-barHeight)/po;
        var scrollsTop=(scrollbarHeight-scrollHeight)/ji;    
        scrolls.style.top=scrollsTop+"px";
    }
    
    
    
function wheel(obj){
    var obk=obj||document;
    var result;
    if(obk.attachEvent){
    obk.attachEvent("onmousewheel",function(e){
        var e=e||event;
        if(e.wheelDelta>0){
            bar.style.top=bar.offsetTop-10+"px";
            if(bar.offsetTop<0){
                bar.style.top=0;
            }
            if(bar.offsetTop>barwrapHeight-barHeight){
                bar.style.top=barwrapHeight-barHeight+"px";
            }
            depo(bar.offsetTop)    
            
        }else{
            bar.style.top=bar.offsetTop+10+"px";
            if(bar.offsetTop<0){
                bar.style.top=0;
            }
            if(bar.offsetTop>barwrapHeight-barHeight){
                bar.style.top=barwrapHeight-barHeight+"px";
            }
            depo(bar.offsetTop)    
            
        }
        })
    }else{
    obk.addEventListener("DOMMouseScroll",function(e){
        var e=e||event;
        if(e.detail>0){
            bar.style.top=bar.offsetTop+10+"px";
            if(bar.offsetTop>barwrapHeight-barHeight){
                bar.style.top=barwrapHeight-barHeight+"px";
            }
            depo(bar.offsetTop)    
            
        }else{
            bar.style.top=bar.offsetTop-10+"px";
            if(bar.offsetTop<0){
                bar.style.top=0;
            }
            depo(bar.offsetTop)    
            
            }
        },false)
    }
    
}
wheel(scrollbar)


</script>