js特效之自定义滚动条实例-js教程-PHP中文网

js特效之自定义滚动条实例

零下一度

发布： 2017-06-27 09:48:40

原创

1616人浏览过

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<style type="text/css">
body {
margin: 0;
}
#wrap {
margin: 30px auto;
position: relative;
border: 1px solid #000;
width: 500px;
padding: 0 20px;
height: 400px;
overflow: hidden;
}
#scroll {
position: absolute;
left: 20px;
top: 0;
width: 500px;
}
p {
font: 14px/30px "宋体";
}
#scrollbar {
position: absolute;
right: 0;
top: 0;
width: 12px;
height: 100%;
background: #f1f1f1;
}
#bar {
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 100px;
border-radius: 6px;
background: #000;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrap">
<div id="scroll">
<h2>关于妙味</h2>
<p>关于妙味妙味课堂是北京妙味趣学信息技术有限公司旗下的it前端培训品牌，妙味课堂是一支独具特色的it培训团队，妙味反对传统it教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！</p>
<p>目前主要针对的是javascript培训，同时还提供了css教程、javascript视频、js特效等，最新推出了外地学员们喜欢的javascript网络课程服务，同时还为处于javascript入门阶段的朋友录制了大量javascript视频，其中涉及了大量javascript基础知识，希望妙味课堂推出的javascript网络培训课程能带给大家更多惊喜。</p>
<h2>妙味讲师：</h2>
<p>妙味课堂的讲师来自中国最具吸引力的it企业，如人人网、shopex等。</p>
<h3>妙味js课程高级讲师：钟毅</h3>
<p>资深php程序员，曾独立开发cms系统。</p>
<p>对前端开发有极大热情，尤其是在ajax数据交互方面，</p>
<p>有着复杂而深入的项目实践经验。</p>
<p>钟毅为人性情温和、对教学工作有极大的耐心，</p>
<p>现任妙味课堂js课程高级讲师。</p>
<h2>关于妙味</h2>
<p>关于妙味妙味课堂是北京妙味趣学信息技术有限公司旗下的it前端培训品牌，妙味课堂是一支独具特色的it培训团队，妙味反对传统it教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！</p>
<p>目前主要针对的是javascript培训，同时还提供了css教程、javascript视频、js特效等，最新推出了外地学员们喜欢的javascript网络课程服务，同时还为处于javascript入门阶段的朋友录制了大量javascript视频，其中涉及了大量javascript基础知识，希望妙味课堂推出的javascript网络培训课程能带给大家更多惊喜。</p>
<h2>妙味讲师：</h2>
<p>妙味课堂的讲师来自中国最具吸引力的it企业，如人人网、shopex等。</p>
<h3>妙味js课程高级讲师：钟毅</h3>
<p>资深php程序员，曾独立开发cms系统。</p>
<p>对前端开发有极大热情，尤其是在ajax数据交互方面，</p>
<p>有着复杂而深入的项目实践经验。</p>
<p>钟毅为人性情温和、对教学工作有极大的耐心，</p>
<p>现任妙味课堂js课程高级讲师。</p>
<h2>妙味讲师：</h2>
<p>妙味课堂的讲师来自中国最具吸引力的it企业，如人人网、shopex等。</p>
<h3>妙味js课程高级讲师：钟毅</h3>
<p>资深php程序员，曾独立开发cms系统。</p>
<p>对前端开发有极大热情，尤其是在ajax数据交互方面，</p>
<p>有着复杂而深入的项目实践经验。</p>
<p>钟毅为人性情温和、对教学工作有极大的耐心，</p>
<p>现任妙味课堂js课程高级讲师。</p>
<h2>妙味讲师：</h2>
<p>妙味课堂的讲师来自中国最具吸引力的it企业，如人人网、shopex等。</p>
<h3>妙味js课程高级讲师：钟毅</h3>
<p>资深php程序员，曾独立开发cms系统。</p>
<p>对前端开发有极大热情，尤其是在ajax数据交互方面，</p>
<p>有着复杂而深入的项目实践经验。</p>
<p>钟毅为人性情温和、对教学工作有极大的耐心，</p>
<p>现任妙味课堂js课程高级讲师。</p>
</div>
<div id="scrollbar">
<div id="bar"></div>
</div>
</div>
<div style="height:500px;background:red"></div>
<script type="text/javascript" src="startmove.js?1.1.11"></script>
<script type="text/javascript">
(function(){
var wrap = document.queryselector('#wrap');
var scroll = document.queryselector('#scroll');
var bar = document.queryselector('#bar');

// 修改滚动条的高度
var scale = wrap.clientheight/scroll.offsetheight;
css(bar,"height",wrap.clientheight*scale);

var maxY = wrap.clientHeight - bar.offsetHeight;
bar.addEventListener('mousedown', function(e) {
var elY = css(bar,"top");
var startY = e.clientY;
e.preventDefault();
document.addEventListener('mousemove',move);
document.addEventListener('mouseup',end);
function move(e){
var nowY = e.clientY;
var y = nowY - startY + elY;
if(y < 0 ){
y = 0;
} else if(y > maxY){
y = maxY;
}

css(bar,"top",y);
css(scroll,"top",-y/scale);
}
function end(){
document.removeEventListener('mousemove',move);
document.removeEventListener('mouseup',end);
}
});
mMouseWheel(wrap, function(e){
var y = css(bar,"top");
y -= 10;
if(y < 0 ){
y = 0;
}
css(bar,"top",y);
css(scroll,"top",-y/scale);
},function(e){
var y = css(bar,"top");
y += 10;
if(y > maxY){
y = maxY;
}
css(bar,"top",y);
css(scroll,"top",-y/scale);
});
function mMouseWheel(el, toUp,toDown){
el.addEventListener('DOMMouseScroll', function(e) {
e.preventDefault();
mouseScroll(e.detail,e);
});
el.addEventListener('mousewheel', function(e) {
e.preventDefault();
mouseScroll(-e.wheelDelta,e);
});
function mouseScroll(dir,e){
if(dir > 0){
toDown(e);
} else {
toUp(e);
}
}
}
})();
</script>
</body>
</html>