js自定义滚动条


    
        我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容

* {
	margin:0;
	padding:0;
}
.box {
	width:300px;
	height:500px;
	border:1px solid #ccc;
	margin:100px;
	position:relative;
	overflow:hidden;
}
.content {
	padding:5px 18px 5px 5px;
	position:absolute;
	top:0;
	left:0;
	overflow:hidden;
}
.scroll {
	width:18px;
	height:100%;
	position:absolute;
	top:0;
	right:0;
	background-color:#eee;
}
.bar {
	width:100%;
	position:absolute;
	top:0;
	left:0;
	background-color:#09f;
	border-radius:10px;
	cursor:pointer;
}

var box = document.getElementById("box");
 var content = document.getElementById("content");
 var bar = document.getElementById("bar");

if (content.offsetHeight > box.offsetHeight) {
     bar.style.height = box.offsetHeight / content.offsetHeight * box.offsetHeight + "px";
 } else {
     bar.style.height = 0;
 }

bar.onmousedown = function(event) {
     var event = event || window.event;
     //获取鼠标在页面中的位置
     var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
     //获取鼠标在bar上按下时在bar中的位置
     var barBoxY = pageY - box.offsetTop - bar.offsetTop;
     document.onmousemove = function(event) {
         var event = event || window.event;
         //鼠标在页面中的坐标
         var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
         //鼠标在盒子中的坐标
         var boxY = pageY - box.offsetTop;
         //bar应该去的位置
         var barY = boxY - barBoxY;
         //3.限制bar的运动范围
         if (barY < 0) {
             barY = 0;
         }
         if (barY > box.offsetHeight - bar.offsetHeight) {
             barY = box.offsetHeight - bar.offsetHeight;
         }
         //让bar跟着鼠标在盒子中的坐标走
         bar.style.top = barY + "px";
         //清除选中文字
         window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

var rate = (content.offsetHeight - box.offsetHeight) / (box.offsetHeight - bar.offsetHeight);
         //内容要移动的距离 = rate*bar当前移动的距离
         content.style.top = -rate * barY + "px"; //运动方向是相反的

};
 };

//鼠标弹起后 bar就不要跟着走了
 document.onmouseup = function() {
     document.onmousemove = null;
 };

PROMULGATOR

hcjsanrajpcmp

相关代码

js自定义滚动条

最新