自定义滚动条

效果图：

原理分析：

困扰的问题之一 clientHeight和offsetHeight的值由什么决定？

假如我们有以下的DIV，主要显示的文字为"This is the main body of DIV"

如上图所示，clientHeight的值由DIV内容的实际高度和CSS中的padding值决定，而offsetHeight的值由DIV内容的实际高度，CSS中的padding值，scrollbar的高度和DIV的border值决定；至于CSS中的margin值，则不会影响clientHeight和offsetHeight的值。

代码：

 1 <style>
 2     *{
 3         margin:0;
 4         padding:0;
 5     }
 6     body{
 7         overflow:hidden;
 8     }
 9     #box{
10         float:right;
11         top:0;
12         right:0px;
13         width:20px;
14         height: 500px;
15         background:#ccc;
16         position:relative;
17     }
18     #drag{
19         position: absolute;
20         top:0;
21         left:0;
22         width:20px;
23         height: 20px;
24         background:green;
25     }
26     #content{
27         position:absolute;
28         left: 0;
29         width: 400px;
30         height: 500px;
31         border: 1px solid black;
32         overflow: hidden;
33     }
34     #text{
35         position:absolute;
36         top: 0;
37     }
38 </style>

 1 <body>
 2         <!--滚动条-->
 3          <div id="box">
 4         <div id="drag"></div>
 5     </div>
 6    <!--  //内容主容器-->
 7     <div id="content">
 8         <!--内容容器-->
 9         <div id="text" style="background:#ccc;width: 120px; ">
10             Although many people talk about the super performance of quantum computing, such as one second to complete the current supercomputer computing tasks for several years, but so far did not create a true sense of the quantum computer, one of the very important reason is that, The state of particles used in quantum computation is not stable, and any electromagnetic or physical interference can easily disrupt its work. The state of the Mayola fermion is very stable, which makes it a perfect choice for making quantum computers. Six months ago in the laboratory of Shanghai Jiaotong University, Jia Jinfeng successfully captured it.
11             Speaking of the scene, Jia Jinfeng said: "In fact, I started to hear the Mayolana fermions, I think this thing may not be done 20 years out.
12             Using a special material preparation method, Jia Jinfeng's research team has grown topological insulators on the superconductors with thickness of 5 nanometers. The topological superconductor materials are prepared and finally the Mayolana fermions are found at the interface of the topological superconductors. The mysterious particles were captured 80 years, but also let Jia Jinfeng more firm with its confidence in the manufacture of quantum computers.
13             Speaking of the future of the plan, Jia Jinfeng said: "I hope to within a few years to do the topological quantum bit!" (Before) the world has not, so if we cut into this from the point, we are the same with the world The starting line, for our country, this is able to catch up with the footsteps of quantum computing, a starting point.
14         <div>
15     </div>
16     </body>

<script type="text/javascript">
window.onload=function(){
    var oBox=document.getElementById('box');
    var oDrag=document.getElementById('drag');
    var content=document.getElementById('content');//内容主容器
    var oText = document.getElementById('text');
    var conHeight=content.clientHeight  
    var textHeight = oText.clientHeight
    oDrag.onmousedown=function (ev){
        //阻止默认事件
        var e=ev||window.event;
        if (e.preventDefault) {
            e.preventDefault();
        } else{
            e.returnValue=false;
        };
         //e.clientY鼠标当前坐标
        var downY=e.clientY-oDrag.offsetTop;
        //滑块滚动最大距离
        var maxTop = oBox.clientHeight-oDrag.clientHeight
        document.onmousemove=function (ev){
            var e=ev||window.event;
            var top=e.clientY-downY;
            if (top<=0) {
                top=0;
            };
            
            if (top>=maxTop) {
                top=maxTop;
            };
            var scale=top/maxTop;
            var contentY=scale*(conHeight-textHeight);
            oDrag.style.top=top+'px';
            oText.style.top=contentY+'px';
            
        }
        document.onmouseup=function (){
            document.onmousemove=document.onmousemove=null;
        }
       
    }
    var str=window.navigator.userAgent.toLowerCase();
    //火狐浏览器
    if (str.indexOf('firefox')!=-1){
         document.addEventListener('DOMMouseScroll',function (e){
            e.preventDefault();//阻止窗口默认的滚动事件
            if (e.detail<0) {    //向上滚动    div向下滚动
                var scrollHei=oText.offsetTop+25;
                if (scrollHei>=0) {
                    scrollHei=0;
                };
                if (scrollHei<=-(textHeight-conHeight)) {
                    scrollHei=-(textHeight-conHeight);
                };
                var scale=scrollHei/(textHeight-conHeight);
                var top=scale*(oBox.clientHeight-oDrag.clientHeight);
                oText.style.top=scrollHei+'px';
                oDrag.style.top=-top+'px';
            }
            if (e.detail>0) {   //向下滚动    div向上滚动
                var scrollHei=oText.offsetTop-25;
                if (scrollHei>=0) {
                    scrollHei=0;
                };
                if (scrollHei<=-(textHeight-conHeight)) {
                    scrollHei=-(textHeight-conHeight);
                };
                var scale=scrollHei/(textHeight-content.clientHeight);
                var top=scale*(oBox.clientHeight-oDrag.clientHeight);
                oText.style.top=scrollHei+'px';
                oDrag.style.top=-top+'px';
            };
        },false);
    }
    else{//非火狐浏览器
        console.log("非火狐浏览器")
        document.onmousewheel=function (ev){
            var e=ev||window.event;
            if (e.preventDefault) {
                e.preventDefault();
            } else{
                e.returnValue=false;
            };
            if (e.wheelDelta>0) {  //向上滚动    此时div向下移动
                var scrollHei=oText.offsetTop+25;
                if (scrollHei>=0) {
                    scrollHei=0;
                };
                if (scrollHei<=-(textHeight-conHeight)) {
                    scrollHei=-(textHeight-conHeight);
                };
                var scale=scrollHei/(textHeight-conHeight);
                var top=scale*(oBox.clientHeight-oDrag.clientHeight);
                oText.style.top=scrollHei+'px';
                oDrag.style.top=-top+'px';
            };
            if (e.wheelDelta<0) {  //向下
                console.log("下")
                var scrollHei=oText.offsetTop-25;
                if (scrollHei>=0) {
                    scrollHei=0;
                };
                if (scrollHei<=-(textHeight-conHeight)) {
                    scrollHei=-(textHeight-conHeight);
                };
                var scale=scrollHei/(textHeight-conHeight);
                var top=scale*(oBox.clientHeight-oDrag.clientHeight);
                oText.style.top=scrollHei+'px';
                oDrag.style.top=-top+'px';
            };
        }
    }

}
</script>

全屏模式

<script type="text/javascript">
window.onload=function(){
    var oBox=document.getElementById('box');
    var oDrag=document.getElementById('drag');
    var content=document.getElementById('content');
    var viewHeight=document.documentElement.clientHeight;
    var conHeight=content.clientHeight
    oBox.style.height=viewHeight+'px';
    oDrag.style.height=viewHeight/conHeight*viewHeight+'px';

    window.onresize = function(){
        viewHeight=document.documentElement.clientHeight;
        oBox.style.height=viewHeight+'px';
        oDrag.style.height=viewHeight/conHeight*viewHeight+'px';

        oDrag.style.top=-content.offsetTop/(content.clientHeight-viewHeight)*(oBox.clientHeight-oDrag.clientHeight)+'px';
        
    }

    oDrag.onmousedown=function (ev){
        //阻止默认事件
        var e=ev||window.event;
        if (e.preventDefault) {
            e.preventDefault();
        } else{
            e.returnValue=false;
        };
         //e.clientY鼠标当前坐标
        var downY=e.clientY-oDrag.offsetTop;
       
        document.onmousemove=function (ev){
            var e=ev||window.event;
            var top=e.clientY-downY;
            if (top<=0) {
                top=0;
            };
            if (top>=oBox.clientHeight-oDrag.clientHeight) {
                top=oBox.clientHeight-oDrag.clientHeight;
            };
            var scale=top/(oBox.clientHeight-oDrag.clientHeight);
            var contentY=scale*(content.clientHeight-viewHeight);
            oDrag.style.top=top+'px';
            content.style.top=-contentY+'px';
            
        }
        document.onmouseup=function (){
            document.onmousemove=null;
        }
    }
    var str=window.navigator.userAgent.toLowerCase();
    //火狐浏览器
    if (str.indexOf('firefox')!=-1){
         document.addEventListener('DOMMouseScroll',function (e){
            e.preventDefault();//阻止窗口默认的滚动事件
            if (e.detail<0) {
                var scrollHei=content.offsetTop+25;
                if (scrollHei>=0) {
                    scrollHei=0;
                };
                if (scrollHei<=-(content.clientHeight-viewHeight)) {
                    scrollHei=-(content.clientHeight-viewHeight);
                };
                var scale=scrollHei/(content.clientHeight-viewHeight);
                var top=scale*(oBox.clientHeight-oDrag.clientHeight);
                content.style.top=scrollHei+'px';
                oDrag.style.top=-top+'px';
            }
            if (e.detail>0) {
                var scrollHei=content.offsetTop-25;
                if (scrollHei>=0) {
                    scrollHei=0;
                };
                if (scrollHei<=-(content.clientHeight-viewHeight)) {
                    scrollHei=-(content.clientHeight-viewHeight);
                };
                var scale=scrollHei/(content.clientHeight-viewHeight);
                var top=scale*(oBox.clientHeight-oDrag.clientHeight);
                content.style.top=scrollHei+'px';
                oDrag.style.top=-top+'px';
            };
        },false);
    }
    else{//非火狐浏览器
        document.onmousewheel=function (ev){
            var e=ev||window.event;
            if (e.preventDefault) {
                e.preventDefault();
            } else{
                e.returnValue=false;
            };
            if (e.wheelDelta>0) {
                var scrollHei=content.offsetTop+25;
                if (scrollHei>=0) {
                    scrollHei=0;
                };
                if (scrollHei<=-(content.clientHeight-viewHeight)) {
                    scrollHei=-(content.clientHeight-viewHeight);
                };
                var scale=scrollHei/(content.clientHeight-viewHeight);
                var top=scale*(oBox.clientHeight-oDrag.clientHeight);
                content.style.top=scrollHei+'px';
                oDrag.style.top=-top+'px';
            };
            if (e.wheelDelta<0) {
                var scrollHei=content.offsetTop-25;
                if (scrollHei>=0) {
                    scrollHei=0;
                };
                if (scrollHei<=-(content.clientHeight-viewHeight)) {
                    scrollHei=-(content.clientHeight-viewHeight);
                };
                var scale=scrollHei/(content.clientHeight-viewHeight);
                var top=scale*(oBox.clientHeight-oDrag.clientHeight);
                content.style.top=scrollHei+'px';
                oDrag.style.top=-top+'px';
            };
        }
    }

}
</script>

posted @ 2017-04-01 09:17 h5monkey 阅读(187) 评论(0) 编辑收藏举报

刷新页面返回顶部

😘写东西的地儿🖖

自定义滚动条

效果图：

原理分析：

代码：

全屏模式

公告