模拟滚动条


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

模拟滚动条,码迷,mamicode.com

时间: 2024-11-05 03:25:31

模拟滚动条的相关文章

javascript动画系列第五篇——模拟滚动条

× 目录 [1]原理介绍 [2]数字加减 [3]元素尺寸[4]内容滚动 前面的话 当元素内容溢出元素尺寸范围时,会出现滚动条.但由于滚动条在各浏览器下表现不同,兼容性不好.所以,模拟滚动条也是很常见的应用.本文将详细介绍滚动条模拟 原理介绍 滚动条模拟实际上和元素模拟拖拽类似.仅仅通过范围限定,使元素只可以在单一方向上拖拽 <div id="box" style="height: 200px;width: 16px;background-color:#F5F5F5;bo

javascript 实现模拟滚动条,但不支持鼠标滚轮

模拟滚动条做项目的时候,很多时候会用到,所以就写了一个这么模拟滚动条,但是不支持滚轮事件 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <style> *{padding:0;margin:0;} .scroll{width:320px;marg

原生js模拟滚动条

滚动条的基本交互有两个,鼠标拖拽滚动条和滚轮滚动. 滚动条涉及到的dom元素:1.主体区域(obj,box2与box4的父元素),鼠标滚动的触发主体,包含内容和滚动条,宽高自定.2.滚动条(box1),宽自定,高按内容区比例计算.3.滚动区域(box2,box1的父节点),高与内容可视区的高相同,宽自定.4.内容(box3,滚动的内容主体).5.内容(box4,box3的父元素,有限宽高,内容可视区). 实现的基本原理就是以上元素绝对定位,通过鼠标的交互事件,来完成相关dom的top值,已达到模

js模拟滚动条(不依赖jquery)

转载请注明: TheViper http://www.cnblogs.com/TheViper 当页面中有很多滚动条,它们相互嵌套,很不好看,这时就会模拟滚动条,并给这个滚动条好看的样式,使得页面美观. 模拟滚动条很多时候是去用jquery插件,然后写几行代码就搞定了.不过随着mvvm的快速发展,很多时候都懒得用jquery了,这就是本文的动机,本屌力求用简单的不依赖jquery只依赖mvvm(avalon) api的代码,完成一个简易的滚动条. 要求: 1.鼠标滚轮可以让滚动条工作,界面滚动

js模拟滚动条

1 <!DOCTYPE html> 2 <html> 3 <head> 4 5 <title></title> 6 <style type="text/css"> 7 * { margin: 0px; padding: 0px; } 8 .scroll-boxall { width: 312px; height: 500px; overflow: hidden; zoom: 1; border: 1px solid

div模拟滚动条

如果内容有误,还请留言帮我指出,非常感谢 有木有觉得window下浏览器默认的滚动条很丑? 特别是在黑色风格的网站中 用iframe嵌套或者overflow:auto 出现滚动条的时候 那么我们来模拟一个滚动条吧 demo01 说明: 1.content元素不能有border 如果有10px的border 把滚条拖到最下面后 将有10px内容看不到 2.调用方式:scrollFuc('content','nr','scroll_con','scroll_box'); 不足: 此版本没有抽象出对s

模拟滚动条控制内容滚动

每次页面内容超出范围的时候,为了美观,我们都会加上滚动条处理,要是浏览器默认滚动条无法满足美感的时候,我们需要自己模拟出一个符合需求的滚动条,如下: 实现过程: 1.简单样式: #div1 {width: 30px; height: 500px; background: black; position: absolute; left: 10px; top: 10px;}#div2 {width: 30px; height: 30px; background: red; position: abs

jQuery实现模拟滚动条效果;

滚动条在web开发中,很常见,原生的HTML滚动条很难看,因此很多网站借助JS来模拟实现滚动条效果: 滚动条的实现原理其实比较简单,拿垂直滚动条来说: 1),最外层容器需要设置overflow:hidden,里层容器的高度(滚动框)一亘高过最外层容器,就会出现右侧绝对定位的滚动条,并且还要在外层容器上面监听鼠标滚轮事件,根据滚动的速度设置右侧滚动条的top值; 2),给右侧滚动条监听鼠标拖动事件,当拖动滚动条的时候,滚动框内的内容会发生相应的滚动,这里就要求计算出滚动框的滚动距离: 3),滚动距

js 模拟滚动条

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