微客导航 » 文章资讯 » JS自定义滚动条效果简单实现代码

JS自定义滚动条效果简单实现代码

2024-02-07 03:00:03 145

本文实例为大家分享了JS自定义滚动条效果的具体代码，供大家参考，具体内容如下





自定义滚动条

#div1{
width:20px;
height:400px;
position:relative;
background:black;
margin:5pxauto;
left:200px;
}

#div2{
width:20px;
height:20px;
position:absolute;
background:green;
}

#div3{
width:300px;
height:300px;
position:relative;
overflow:hidden;
top:-320px;
border:1pxsolidblack;
background-color:green;
}

#div4{
position:absolute;
left:0;
top:-20px;
padding:4px;
}


window.onload=function(){
varoDiv=document.getElementById('div1');
varoDiv2=document.getElementById('div2');
varoDiv3=document.getElementById('div3');
varoDiv4=document.getElementById('div4');
vardisY=0;
oDiv.onmousedown=function(ev){
varoEvent=ev||event;
//Div距离ClientX-Left
disY=oEvent.clientY-oDiv2.offsetTop;
if(oDiv2.setCapture){
//IE
oDiv2.onmousemove=function(ev){
varoEvent=ev||event;
vary=oEvent.clientY-disY;
//下拉
varscale=y/(oDiv.offsetHeight-oDiv2.offsetHeight);
//document.title=scale;
//磁铁吸附
if(scale<0){
scale=0;
}elseif(scale>1){
scale=1;
}
if(y<0){
y=0;
}elseif(y>oDiv.offsetHeight-oDiv2.offsetHeight){
y=oDiv.offsetHeight-oDiv2.offsetHeight;
}
oDiv2.style.top=y+'px';
oDiv4.style.top=-(oDiv4.offsetHeight-oDiv3.offsetHeight)
*scale+'px';

};
oDiv2.onmouseup=function(){
oDiv2.onmousemove=null;
oDiv2.onmouseup=null;

oDiv2.releaseCapture();
};

oDiv2.setCapture();
}else{
//ChromeFF
oDiv2.onmousemove=function(ev){
varoEvent=ev||event;
vary=oEvent.clientY-disY;
if(y<0){
y=0;
}elseif(y>Div2.offsetHeight-oDiv.offsetHeight){
y=Div2.offsetHeight-oDiv.offsetHeight;
}
oDiv2.style.top=y+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;

};

}
//阻止浏览器的默认拖拽
returnfalse;
};

};

来自意大利时尚之都米兰的地标建筑“垂直森林”来到了中国。据美媒boredpanda2月6日报道，“垂直森林之父”为斯特凡诺·博埃里（Stefano Boeri），而南京“垂直森林”项目为亚洲首座博埃里设计在建的“垂直森林”建筑。报道称，此项建筑将由656英尺（约200米）及354英尺（约108米）的双塔楼组成，外围覆盖至少1000棵树以及约2500棵灌木类植物。“垂直森林”每天可以消化二氧化碳，并释放132磅（约60千克）的氧气。来自意大利时尚之都米兰的地标建筑“垂直森林”来到了中国。据美媒boredpanda2月6日报道，“垂直森林之父”为斯特凡诺·博埃里（Stefano Boeri），而南京“垂直森林”项目为亚洲首座博埃里设计在建的“垂直森林”建筑。报道称，此项建筑将由656英尺（约200米）及354英尺（约108米）的双塔楼组成，外围覆盖至少1000棵树以及约2500棵灌木类植物。“垂直森林”每天可以消化二氧化碳，并释放132磅（约60千克）的氧气。来自意大利时尚之都米兰的地标建筑“垂直森林”来到了中国。据美媒boredpanda2月6日报道，“垂直森林之父”为斯特凡诺·博埃里（Stefano Boeri），而南京“垂直森林”项目为亚洲首座博埃里设计在建的“垂直森林”建筑。报道称，此项建筑将由656英尺（约200米）及354英尺（约108米）的双塔楼组成，外围覆盖至少1000棵树以及约2500棵灌木类植物。“垂直森林”每天可以消化二氧化碳，并释放132磅（约60千克）的氧气。来自意大利时尚之都米兰的地标建筑“垂直森林”来到了中国。据美媒boredpanda2月6日报道，“垂直森林之父”为斯特凡诺·博埃里（Stefano Boeri），而南京“垂直森林”项目为亚洲首座博埃里设计在建的“垂直森林”建筑。报道称，此项建筑将由656英尺（约200米）及354英尺（约108米）的双塔楼组成，外围覆盖至少1000棵树以及约2500棵灌木类植物。“垂直森林”每天可以消化二氧化碳，并释放132磅（约60千克）的氧气。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

JS自定义滚动条效果简单实现代码

热门推荐

随机推荐