zoukankan      html  css  js  c++  java
  • js自定义滚动条

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

    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';
            }
        
        })

    效果如下

  • 相关阅读:
    Python 面向对象高级编程
    Python 继承和多态
    Python 访问限制
    学习笔记项目3-Django-管理网站
    学习笔记项目2-Django-创建数据库及应用
    学习笔记项目1-Django-创建虚拟环境和项目
    写一个 100 以内的奇数列表
    给一个字符串,转换成数字整数,若包含非法字符,返回提示,正确则反回整数值,不能使用内置函数转换
    Linux系统实现一个everything程序
    自动化测试常用脚本-等待某个元素是否显示
  • 原文地址:https://www.cnblogs.com/aSnow/p/9045388.html
Copyright © 2011-2022 走看看