CSS 实现隐藏滚动条同时又可以滚动--也可以做自定义的滚动条（3）-- 实现（普通版）

html:

jquery大家都知道，这里div中width:200px height: 600px  或者width: 317px,height:217px, width:300px; height:200px;

这些都应该是动态生成的

实际滚动条的布局：<class=\"per-scrollbar\" ></div>及其内容内部的部分，包括<class=\"per-scrollbar\" ></div>

<div style=\"width:300px; height: 200px;\">

   
        <!-- per-scrollbar_wrap scroll事件 -->
        <div pc=\"\" class=\"per-scrollbar\" scrollmax=\"\" _pt=\"pscroll-small\" _id=\"bfefcjdedeedbbhfjee\" style=\"max-width: 300px;max-height: 200px; border: 1px solid gray;\">
            <div class=\"per-scrollbar_wrap\" scrollparent=\"\" style=\"width: 317px; height: 217px;\">
                <div class=\"per-scrollbar_actual\" scroll=\"\">
                    <!-- begin 这里写自己要显示的内容 -->
                    <div style=\"width:200px;height:600px;overflow:hidden;display:block; background: beige; border: 1px solid red;\">我是内容</div>
                    <!-- end 这里写自己要显示的内容 -->
                </div>
            </div>
            <!-- begin 自定义的滚动条 -->
            <!-- 横向-->
            <div class=\"per-scrollbar__bar per-is-horizontal\" horizontal=\"\" style=\"display: none;\">
                <div class=\"per-scrollbar__thumb\" horizontalbar=\"\" style=\"width: 96.1538%; transform: translateX(0%);\"></div>
            </div>
            <!-- 纵向 -->
            <div class=\"per-scrollbar__bar per-is-vertical\" vertical=\"\" style=\"display: block;\">
                <!--height: 33.3333%; transform: translateY(0%); 也是动态生成的  -->
                <div class=\"per-scrollbar__thumb\" verticalbar=\"\" style=\"height: 33.3333%;\"></div>
            </div>
            <!-- end 自定义的滚动条 -->
        </div>
    </div>
    <  src=\"./jquery.js\"></ >

css: 

.per-scrollbar_wrap::-webkit-scrollbar {
            width: 17px; 
            height: 17px;
            /* display: none; */
        }

为什么要这么设置？ 

首先要从这里看

最外层明明给的width:300px,height:200px为什么 里层的高度和宽度就要设置width:317,height:217呢。这是为了兼容IE浏览器。让ＩＥ浏览器不出现滚动条。但是chrome中 width:317px,height:217px的div内容区是300px,200px 为什么呢？就是因为设置了.per-scrollbar_wrap::-webkit-scrollbar { -- 这个属性设置滚动条（谷歌浏览器）
            width: 17px; 
            height: 17px;
            /* display: none; */
        }

这个属性。个人的理解觉得是在chrome中 style设置的width = contentwidth + scrollWIdth（个人认为）

<style>
       .per-scrollbar {
            overflow: hidden;
            position: relative;
            height: 100%;
            width: 100%;
            min-width: 100%;
        }
        .per-scrollbar_wrap {
            overflow: scroll;
            margin-bottom: -17px;
            margin-right: -17px;
            min-height: 100%;
        }
        .per-scrollbar_wrap::-webkit-scrollbar {
            width: 17px; 
            height: 17px;
            /* display: none; */
        }
        .per-scrollbar_actual {
            min-width: 100%;
            min-height: 100%;
        }
        /* 横向滚动条样式 */
        .per-scrollbar__bar.per-is-horizontal {
            height: 6px;
            left: 2px;
        }
        .per-scrollbar__bar {
            position: absolute;
            right: 2px;
            bottom: 2px;
            z-index: 3;
            border-radius: 4px;
            display: none;
        }
        /* 纵向 滚动条样式*/
        .per-scrollbar__bar.per-is-vertical>div {
            width: 100%;
        }
        .per-scrollbar__thumb {
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            cursor: pointer;
            border-radius: inherit;
            background: #d1d1d1;
            transition: .1s linear;
            top: 0;
        }
        .per-scrollbar__bar.per-is-vertical {
            width: 6px;
            top: 2px;
        }
        .per-scrollbar__bar {
            position: absolute;
            right: 2px;
            bottom: 2px;
            z-index: 3;
            border-radius: 4px;
            /* display: none; */
        }
    </style>

js代码：

< >
        //乘法
        Math.multiplication = function (arg1, arg2) {
            if (isNaN(parseFloat(arg1)) || isNaN(parseFloat(arg2))) return null;
            var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
            try { m += s1.split(\".\")[1].length } catch (e) { }
            try { m += s2.split(\".\")[1].length } catch (e) { }
            return Number(s1.replace(\".\", \"\")) * Number(s2.replace(\".\", \"\")) / Math.pow(10, m)
        };
        //浮点数相除求结果
        Math.division = function (arg1, arg2) {
            if (isNaN(parseFloat(arg1)) || isNaN(parseFloat(arg2))) return null;
            if (arg2 == 0) return null;
            var r1, r2, m;
            try { r1 = arg1.toString().split(\".\")[1].length } catch (e) { r1 = 0 }
            try { r2 = arg2.toString().split(\".\")[1].length } catch (e) { r2 = 0 }
            m = Math.pow(10, Math.max(r1, r2));
            var first = Math.multiplication(arg1, m);
            var second = Math.multiplication(arg2, m);
            return first / second;
        };
    </ >
    < >
        /* 
            计算滚动条的高度，这里有一点需要注意，层级1的高度与滚动条的总高度是一样的，通过相似比例计算：
            滚动条总高度 ：滚动条高度 = 层级2 ：层级1 
            =>滚动条高度 = 滚动条总高度 /（层级2 / 层级1）
        */
        $(function(){
            // var scrollParentDiv = $(\".per-scrollbar_wrap\");
            // var clientHeight = $(\".per-scrollbar\").height();
            // var scrollHeight = $(\".per-scrollbar_actual\").height();
            //var maxScrollTop = scrollHeight - clientHeight;
            
            
            // var clientWidth = $(\".per-scrollbar\").width();
            // var scrollWeight = $(\".per-scrollbar_actual\").width();
            // var maxScrollLeft = scrollHeight - clientHeight;
            var scrollParentDiv,
                $per_scrollbar,
                $per_scrollbar_actual,
                $verticalbar,
                $horizontalbar,
                clientHeight,
                scrollHeight,
                maxScrollTop,
                clientWidth,
                scrollWidth,
                maxScrollLeft;
            
            var initVaria = function(){
                scrollParentDiv =  $(\".per-scrollbar_wrap\");
                $per_scrollbar = $(\".per-scrollbar\");
                $per_scrollbar_actual = $(\".per-scrollbar_actual\");

                $verticalbar = $(\".per-scrollbar__thumb[verticalbar]\");
                $horizontalbar =  $(\".per-scrollbar__thumb[horizontalbar]\");

                clientHeight = $per_scrollbar.height();
                scrollHeight = $per_scrollbar_actual.height();
                maxScrollTop = scrollHeight - clientHeight;

                clientWidth = $per_scrollbar.width();
                scrollWidth = $per_scrollbar_actual.width();
                maxScrollLeft = scrollWidth - clientWidth;

            }
            // 计算纵向滚动条的高度（记住不是滚动条移动的高度）
            var getVerticalbarH = function(){
                // var clientHeight = $(\".per-scrollbar\").height();
                // var scrollHeight = $(\".per-scrollbar_actual\").height();
                // var verticalbarH =  clientHeight / (scrollHeight/clientHeight);
                //$(\".per-scrollbar__thumb[verticalbar]\").height(verticalbarH);
                var clientHeight = $per_scrollbar.height();
                var scrollHeight = $per_scrollbar_actual.height();
                var verticalbarH =  clientHeight / (scrollHeight/clientHeight);
                $verticalbar.height(verticalbarH);
            }
            // 滚动事件
            var scrollEvent = function() {
                var scrollTop = 0, scrollLeft = 0;
                getVerticalbarH();
                if (maxScrollTop > 0) {
                    scrollTop = scrollParentDiv.scrollTop();
                    var translateY = Math.division(scrollTop, clientHeight);
                    translateY = Math.multiplication(translateY, 100);
                    // $(\".per-scrollbar__thumb[verticalbar]\").css({ transform: \' translateY(\' + translateY + \'%)\' });
                    $verticalbar.css({ transform: \' translateY(\' + translateY + \'%)\' });
                }
                if (maxScrollLeft > 0) {
                    scrollLeft = scrollParentDiv.scrollLeft();
                    var translateX = Math.division(scrollLeft, clientWidth);
                    translateX = Math.multiplication(translateX, 100);
                    //$(\".per-scrollbar__thumb[horizontalbar]\").css({ transform: \' translateX(\' + translateX + \'%)\' });
                    $horizontalbar.css({ transform: \' translateX(\' + translateX + \'%)\' });
                }
            };
            
            // 绑定事件
            var bindEvent = function(){
                // $(\".per-scrollbar_wrap\").on(\"scroll\",scrollEvent);
                scrollParentDiv.on(\"scroll\",scrollEvent);
            } 
            var init = function(){
                initVaria();
                // render();
                bindEvent();
            };
            init();
        })
        
    </ >

上一篇：CSS 实现隐藏滚动条同时又可以滚动--也可以做自定义的滚动条（2）-- 布局

https://blog.csdn.net/zhangshab/article/details/85127239