自定义滚动条效果实现

最新推荐文章于 2019-12-21 17:59:35 发布

原创最新推荐文章于 2019-12-21 17:59:35 发布 · 265 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style>
* {margin:0;padding:0;}
.box {width:300px;height:500px;border:1pxsolid red;margin:100px;position:relative;overflow:hidden;}
.content {padding:5px18px5px5px;position:absolute;top:0;left:0;}
.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:red;border-radius:10px;cursor:pointer;}
</style>
</head>

<body>

<div class="box"id="box">

<div class="content"id="content">

我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字内容我是文字底部

</div>

<div class="scroll">

<div class="bar"id="bar"></div>

</div>

</div>

</body>

</html>

<script>

//获取元素

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

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

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

//alert(bar.offsetTop);

//根据文字内容高度生成滚动条高度

//滚动条的高度/容器的高度 = 容器的高度 / 内容的高度

//滚动条的高度 = (容器的高度 / 内容的高度)*容器的高度

if (content.offsetHeight> box.offsetHeight) {

bar.style.height= box.offsetHeight / content.offsetHeight* box.offsetHeight + "px";

} else {

bar.style.height= "100%";

}

//鼠标按下后可拖拽鼠标在文档上移动的时候滚动条跟随

bar.onmousedown= function (event) {

// var event = event || window.event;

var pageY= event.pageY || event.clientY+ document.documentElement.scrollTop;

var spaceY= pageY - box.offsetTop- bar.offsetTop;

document.onmousemove= function (event) {

// var event = event || window.event;

var pageY= event.pageY || event.clientY+ document.documentElement.scrollTop;

var barY= pageY - box.offsetTop- spaceY;

if (barY> (box.offsetHeight- bar.offsetHeight)) {

barY = box.offsetHeight- bar.offsetHeight;

} elseif (barY < 0) {

barY = 0;

}

//console.log(barY);

bar.style.top= barY + "px";

//按比例移动文字

//内容移动要的距离 / 滚动条要移动的距离

//(内容的高度 - 容器的高度) / (容器的高度 - 滚动条的高度)

var bili= (content.offsetHeight- box.offsetHeight) / (box.offsetHeight- bar.offsetHeight);

content.style.top= -bili * bar.offsetTop + "px";

// window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

}

}

document.onmouseup= function () {

document.onmousemove= null;

}

// isFirefox 是伪代码，自行实现

// mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";

// 滚轮的步数

var pic= 0;

//事件监听，添加事件

functionbind(obj,event, fun) {

var obj= typeof obj == "string"? $(obj) : obj;

if (obj.addEventListener) {

obj.addEventListener(event, fun,false);

} elseif (obj.attachEvent) {

obj.attachEvent("on"+ event, fun);

} else {

obj['on'+ event] = fun;

}

}

// 滚动方法

functionscrollFunc(e) {

e.preventDefault();

e = e|| window.event;

if (e.wheelDelta|| e.detail) {

if (e.wheelDelta> 0 || e.detail > 0) {

console.log("内容向下")

pic -= 10;

if (pic<= 0) {

pic = 0

}

}

if (e.wheelDelta< 0 || e.detail < 0) {

console.log("内容向上");

pic += 10;

if (pic> (box.offsetHeight- bar.offsetHeight)) {

pic = box.offsetHeight- bar.offsetHeight;

}

}

bar.style.top= pic + 'px';

content.style.top= (box.offsetHeight- content.offsetHeight) / (box.offsetHeight- bar.offsetHeight) * pic + 'px';

}

}

bind(box,'mousewheel', scrollFunc);//谷歌，ie方法

bind(box,'DOMMouseScroll', scrollFunc);//火狐方法
</script>