js自定义滚动条
2024-09-06 13:35:01
今天听到别人说自定义滚动条，所以就在吃饭的时间写了个
html部分
<div class="out" id="out">
<div class="inner" id="inner">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
</div>
<div class="scrollbar" id="scrollbar">
<div class="scrollbtn" id="scrollbtn"></div>
</div>
</div>
css部分
<style>
*{
padding:;margin:;border:;
}
.out{
width:300px;height:600px;
margin:20px auto;
background:#866C51;
overflow: hidden;
position: relative;
}
.inner{
width:300px;height:auto;
margin:0px auto;
background:#866C51;
}
.box{
width:100%;height:200px;
text-align:center;
line-height:200px;
}
.box:nth-child(1){
background: #11ff4c;
}
.box:nth-child(2){
background: #19faff;
}
.box:nth-child(3){
background: #ff831e;
}
.box:nth-child(4){
background: #111111;
}
.box:nth-child(5){
background: #ff6dd2;
}
.box:nth-child(6){
background: #223aff;
}
.box:nth-child(7){
background: #111111;
}
.box:nth-child(8){
background: #d9e8ff;
}
.box:nth-child(9){
background: #ff80d8;
}
.box:nth-child(10){
background: #a033ff;
}
.box:nth-child(11){
background: #2b33ff;
}
.box:nth-child(12){
background: #17ffda;
}
.scrollbar{
width:10px;height:600px;
background:#66513B;
position: absolute;
right:;top:;
}
.scrollbtn{
width:100%;height:50px;
background:#BCA68E;
border-radius:20px;
position: absolute;
top: 0px;
}
</style>
js部分
var inner=document.getElementById('inner');
var scrollbtn=document.getElementById('scrollbtn');
var out=document.getElementById('out');
var scrollbar=document.getElementById('scrollbar');
var bili=inner.offsetHeight/out.offsetHeight;//盒子和内容的比例
scrollbtn.style.height=scrollbar.offsetHeight/bili+'px';//内容的高
var zdh=scrollbar.offsetHeight-scrollbtn.offsetHeight;//最大的top值
var spend=20
scrollbtn.onmousedown = function(e){
var ev=e||window.event;
var y=ev.clientY-scrollbtn.offsetTop;//鼠标点击时滚动条的位置
document.onmousemove = function (e) {
var ev=e||window.event;
var tops=ev.clientY-y;//滚动时top值
if(tops<0){
tops=0
}else if(tops>zdh){
tops=zdh
}
scrollbtn.style.top=tops+'px';
inner.style.marginTop=-tops*bili+"px";
}
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
}
//检测鼠标滚动
function mouseWheel(obj,upfun,downfun){
if(obj.addEventListener){
obj.addEventListener("mousewheel",fn);
obj.addEventListener("DOMMouseScroll",fn)
}else{
obj.attachEvent("onmousewheel",fn);
}
function fn(e){
var ev=e||window.event;
//鼠标滚轮滚动的方向
var val=ev.detail||ev.wheelDelta;
if(val==-3||val==120){
upfun();//向上滚
}else if(val==3||val==-120){
downfun();//向下滚
}
if(ev.preventDefault){
ev.preventDefault();
}else{
ev.returnValue=false;
}
}
}
mouseWheel(out,function(){
if(scrollbtn.offsetTop<=0){
scrollbtn.style.top=0+'px';
inner.style.marginTop=0+'px';
}else{
inner.style.marginTop=inner.offsetTop+spend+"px";
scrollbtn.style.top=scrollbtn.offsetTop-spend/bili+'px';
}
},function(){
if(scrollbtn.offsetTop>=zdh){
scrollbtn.style.top=zdh+'px';
inner.style.marginTop=-zdh*bili+'px';
}else{
inner.style.marginTop=inner.offsetTop-spend+"px";
scrollbtn.style.top=scrollbtn.offsetTop+spend/bili+'px';
}
})
效果如下
最新文章
- linux中断与异常
- How to print 如何输出 int64_t，uint64_t的值 in C
- cannot simultaneously fetch multiple bags
- 与你相遇好幸运，Sail.js定义其他主键
- HTML 运算符、类型转换
- Git版本控制
- 023使用typeof关键字获取类内部结构
- 安装jansson库【JSON库C语言版】
- WCF技术剖析之二十八：自己动手获取元数据[附源代码下载]
- hdu1507最大匹配
- Android_使用StrictMode 调试开发
- 致网友Wonderfei的一封信（怎样选择自己主动化框架的几点拙见)
- css中auto的用法
- js事件中的event对象
- 微信小程序开发 -- 02
- VO、DTO、DO、PO
- 十五丶IO model
- roc曲线和auc
- linux 安装python 和pip
- [BOI2007]Mokia 摩基亚（CDQ分治）