body,
p {
margin: 0;
}
.wrap {
margin: 50px auto;
position: relative;
width: 400px;
height: 400px;
border: 1px solid #000;
padding-right: 20px;
overflow: hidden;
}
.inner {
font: 14px/30px "宋体";
}
.scrollbar-wrap {
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 100%;
background: rgba(0, 0, 0, .2);
}
.scrollbar {
width: 20px;
min-height: 40px;
border-radius: 10px;
background: #000;
}
// 添加内容
{
let inner = document.querySelector(".inner");
inner.innerHTML = [...(".".repeat(100))].map((item,index)=>`
这是第${index}项内容
`).join("");}
// 给元素的区域添加自定义滚动条
/*
init: {
el: 给哪个区域添加自定义滚动条
scrollbar: 自定义滚动条元素
}
*/
function scrollBar({el,scrollbar}){
css(el,"translateY",0);
css(scrollbar,"translateY",0);
// 拖拽 scrollbar,让它移动
let inner = el.children[0];
let scrollWrap = scrollbar.parentNode;
// 滚动比例
/*
wrap.height/inner.height = scrollbar.height/scrollWrap.height;
scrollbar.height = scrollWrap.height*(wrap.height/inner.height);
*/
//console.log(scrollWrap.clientHeight*(el.clientHeight/inner.offsetHeight));
css(scrollbar,"height",scrollWrap.clientHeight*(el.clientHeight/inner.offsetHeight));
let startMouseY = 0;
let startScrollY = 0;
let minScroll = 0; // 滚动条的最小值
let maxScroll = scrollWrap.clientHeight - scrollbar.offsetHeight;
let move = (e)=>{
let nowMouseY = e.clientY;
let disY = nowMouseY - startMouseY;
let nowY = disY + startScrollY;
console.log(nowY);
nowY = Math.max(nowY,minScroll);
nowY = Math.min(nowY,maxScroll);
css(scrollbar,"translateY",nowY);
css(inner,"translateY",-nowY/scrollScale);
};
let scrollScale = maxScroll/(inner.offsetHeight - el.clientHeight);//滚动比例
scrollbar.addEventListener("mousedown",(e)=>{
startMouseY = e.clientY;
startScrollY = css(scrollbar,"translateY");
document.addEventListener("mousemove",move);
document.addEventListener("mouseup",()=>{
document.removeEventListener("mousemove",move);
},{once:true});
e.preventDefault();
});
}
// 添加自定义滚动条
{
let el = document.querySelector(".wrap");
let scrollbar = document.querySelector(".scrollbar");
scrollBar({
el,
scrollbar
});
}