原生JS自定义滚动条

来源：互联网发布：淘宝0秒付款编辑：程序博客网时间：2024/05/16 14:49

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0}
#box{ width:300px; height:400px; border:1px solid #ccc; position:relative; margin:100px auto; overflow:hidden}
#box p{ position:absolute; left:0; margin-right:30px}
#box span{ position:absolute; width:20px; height:50px; background:#987474; top:0; right:0}
</style>
<script>
window.onload=function(){
var oBox=document.getElementById('box');
var oP=oBox.getElementsByTagName('p')[0];
var oSpan=oBox.getElementsByTagName('span')[0];

//onmousedown开始拖拽
oSpan.onmousedown=function(ev){
ev=ev ||event;
//记录偏移
var disY=ev.clientY-oSpan.offsetTop;

//拖拽
document.onmousemove=function(ev){
ev=ev ||event;
var t=ev.clientY-disY; //减去偏移
if(t<0){t=0};

if(t>oBox.offsetHeight-oSpan.offsetHeight-2){
t=oBox.offsetHeight-oSpan.offsetHeight-2
};
oSpan.style.top=t+'px'; //滚动条进度

//计算比率
var rate=t/(oBox.offsetHeight-oSpan.offsetHeight-2); //比率
console.log(rate);

//移动p溢出部分
oP.style.top=-(oP.offsetHeight-oBox.offsetHeight)*rate+"px";

//由于p标签是往上移动，所以top应该为负值

};

//停止拖拽
document.onmouseup=function(){
document.onmousemove=null;
};

//阻止默认事件圈选文字
return false;

}

};

</script>

</head>

<body>
<div id="box">
<p>
ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。 1998年6月，ECMAScript 2.0版发布。 1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。 2007年10月，ECMAScript 4.0版草案发布，对3.0版做了大幅升级，预计次年8月发布正式版本。草案发布后，由于4.0版的目标过于激进，各方对于是否通过这个标准，发生了严重分歧。以Yahoo、Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动；以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案。 2008年7月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激进，ECMA开会决定，中止ECMAScript 4.0的开发，将其中涉及现有功能改善的一小部分，发布为ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号起名为Harmony（和谐）。会后不久，ECMAScript 3.1就改名为ECMAScript 5。 ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。 1998年6月，ECMAScript 2.0版发布。 1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。 2007年10月，ECMAScript 4.0版草案发布，对3.0版做了大幅升级，预计次年8月发布正式版本。草案发布后，由于4.0版的目标过于激进，各方对于是否通过这个标准，发生了严重分歧。以Yahoossss、Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动；以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案。 2008年7月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激进，ECMA开会决定，中止ECMAScript 4.0的开发，将其中涉及现有功能改善的一小部分，发布为ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号起名为Harmony（和谐）。会后不久，ECMAScript 3.1就改名为ECMAScript 5。 2007年10月，ECMAScript 4.0版草案发布，对3.0版做了大幅升级，预计次年8月发布正式版本。草案发布后，由于4.0版的目标过于激进，各方对于是否通过这个标准，发生了严重分歧。以Yahoossss、Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动；以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案。
</p>
<span></span>
</div>
</body>
</html>

阅读全文

0 0