js自定义滚动条

痛定思痛。 2021-10-01 04:12 411阅读 0赞

今天听到别人说自定义滚动条，所以就在吃饭的时间写了个

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:0;margin:0;border:0;
        }
        .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:0;top:0;
        }
        .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';
            }
        
        })

效果如下

![931240-20180516123950897-1314460530.png][]

转载于:https://www.cnblogs.com/aSnow/p/9045388.html

[931240-20180516123950897-1314460530.png]: /images/20210724/ef9577d6fc434a3ab73f956887a6e1e7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，411人围观）

还没有评论，来说两句吧...

相关阅读

相关 css自定义滚动条

.box::-webkit-scrollbar { width: 6px; height: 200px; }

梦里梦外;/ 2023年01月06日 15:54/ 0 赞/ 117 阅读

相关 mCustomScrollbar.js自定义滚动条…

在写网页的过程中，我们经常会遇到自定义滚动条，自定义滚动条与浏览器默认样式有很大差别，而且还不易改，这是我们就需要好用的插件啦！！！ mCustomScrollbar 是个基

女爷i/ 2022年06月07日 04:14/ 0 赞/ 656 阅读

相关 js自定义滚动条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

蔚落/ 2022年05月23日 12:16/ 0 赞/ 221 阅读

相关原生JS实现自定义滚动条

浏览器带给我们的滚动条 .test{ width: 300px; height: 100px;

约定不等于承诺〃/ 2022年02月27日 02:26/ 0 赞/ 349 阅读

相关自定义滚动条样式

/ 滚动条的宽度 / ::-webkit-scrollbar { width: 7px; height: 7px; }

迷南。/ 2022年02月26日 09:35/ 0 赞/ 320 阅读

相关 jquery-mcustomscrollbar-js自定义滚动条效果

转自：[https://blog.wpjam.com/article/jquery-mcustomscrollbar-js/][https_blog.wpjam.com_art

刺骨的言语ヽ痛彻心扉/ 2022年01月15日 12:19/ 0 赞/ 352 阅读

相关自定义滚动条样式

::-webkit-scrollbar //滚动条整体部分 ::-webkit-scrollbar-button //滚动条两端的按钮 ::-webkit-scroll

骑猪看日落/ 2022年01月14日 13:17/ 0 赞/ 364 阅读

相关自定义滚动条

![875134-20190720145757838-1748771409.png][] .el-container2 { height: cal

女爷i/ 2021年10月30日 01:26/ 0 赞/ 380 阅读

相关 js自定义滚动条

今天听到别人说自定义滚动条，所以就在吃饭的时间写了个 html部分 <div class="out" id="out"> <div clas

痛定思痛。/ 2021年10月01日 04:12/ 0 赞/ 412 阅读

相关 jquery 自定义滚动条

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl

以你之姓@/ 2021年09月15日 07:20/ 0 赞/ 432 阅读