Skip to content

Instantly share code, notes, and snippets.

@RagtagGeoduck
Last active February 20, 2021 03:37
Show Gist options
  • Save RagtagGeoduck/52e55ab3d1513444f6d901a792536e75 to your computer and use it in GitHub Desktop.
Save RagtagGeoduck/52e55ab3d1513444f6d901a792536e75 to your computer and use it in GitHub Desktop.
[自定义滚动条+滚轮事件]#JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义滚动条</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/1503style.css">
</head>
<body>
<div id="wrap">
<div class="content"></div>
<div class="scrollBar">
<div class="scrollIn"></div>
</div>
</div>
<script type="text/javascript">
// 模拟内容区域
var content = document.querySelector('#wrap .content');
var scrollIn = document.querySelector('#wrap .scrollBar .scrollIn');
for(var i=0;i<200;i++){
content.innerHTML += i + '<br/>';
}
// 滚动条的高度/屏幕的高度 = 屏幕的高度/内容的高度 = 滚动条的移动距离/内容滚动的距离
var scale = document.documentElement.clientHeight / content.offsetHeight;
// 滚动条的高度
// scrollIn.style.height = scale * document.documentElement.clientHeight;
scrollIn.style.height = scale * document.documentElement.clientHeight + 'px';
scrollIn.onmousedown = function (){
// 元素的初始位置
var eleY = scrollIn.offsetTop;
scrollIn.setCapture && scrollIn.setCapture()
// 鼠标的初始位置
var mouseY = event.clientY;
document.onmousemove = function (){
var endY = event.clientY;
var disY = endY - mouseY;
// 最终元素位置
var lastY = disY + eleY;
if(lastY<0){
lastY=0
}else if(lastY>document.documentElement.clientHeight-scrollIn.offsetHeight){
lastY=document.documentElement.clientHeight-scrollIn.offsetHeight;
}
scrollIn.style.top = lastY + 'px';
// 设置内容的高度
var contentTop = -lastY / scale;
console.log(contentTop);
console.log(content.style.top);
content.style.top = contentTop + 'px';
}
document.onmouseup = function (){
document.onmousemove=document.onmouseup=null;
scrollIn.releaseCapture && scrollIn.releaseCapture();
}
// dom0事件取消默认行为
return false;
}
var flag = true;
document.addEventListener('mousewheel', scrollMove);
document.addEventListener('DOMMouseScroll', scrollMove);
function scrollMove(event){
if(event.wheelDelta){
if(event.wheelDelta > 0){
// 往上滚
flag = true;
step = -10;
}else {
// 往下滚
flag = false;
step = 10;
}
// flag = event.wheelDelta > 0;
}
if(event.detail){
if(event.detail < 0){
flag = true;
step = -10;
}else {
flag = false;
step = 10;
}
// flag = event.detail < 0;
}
var scrollLastTop = scrollIn.offsetTop + step;
if(scrollLastTop < 0){
scrollLastTop = 0;
}else if(scrollLastTop > document.documentElement.clientHeight - scrollIn.offsetHeight){
scrollLastTop = document.documentElement.clientHeight - scrollIn.offsetHeight;
}
scrollIn.style.top = scrollLastTop + 'px';
var contentTop = -scrollLastTop / scale;
content.style.top = contentTop + 'px';
// if (flag){
// // 判断上边界
// // 页面向上走 滑块向下走
// scrollIn.style.top = scrollIn.offsetTop -10 +'px';
//
// }else{
// // 判断下边界
// // 页面向下走 滑块向上走
// scrollIn.style.top = scrollIn.offsetTop + 10 + 'px';
// }
}
</script>
</body>
</html>
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
}
img {
display: block;
}
input {
outline: none;
}
html,
body {
height: 100%;
overflow: hidden;
}
#wrap {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#wrap .content {
position: absolute;
top: 0;
left: 0;
}
#wrap .scrollBar {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 100%;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
#wrap .scrollBar .scrollIn {
position: absolute;
width: 35px;
height: 30px;
background-color: deepskyblue;
left: 50%;
transform: translateX(-50%);
}
/*# sourceMappingURL=1503style.css.map */
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
}
img{
display: block;
}
input{
outline:none;
}
html,body{
height: 100%;
overflow: hidden;
}
#wrap{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
.content{
position: absolute;
top: 0;
left: 0;
}
.scrollBar{
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 100%;
border-left: 1px solid grey;
border-right: 1px solid grey;
.scrollIn{
position: absolute;
width: 35px;
height: 30px;
background-color: deepskyblue;
//margin: 0 auto;
left: 50%;
transform: translateX(-50%);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment