每天一個JS 小demo之自定義滾動條。主要知識點：事件應用
<!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"></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>
每天一個JS 小demo之自定義滾動條。主要知識點：事件應用