去掉丑丑的滚动条div仍然能滚动

工作的时候容易遇到这种情况：页面某一区域需要滚动，但并不想浏览器自带的滚动条出现

而各个浏览器的滚动条各不相同，宽度、颜色都不统一。为了美观，优化这些风格不一的滚动条 也是前端工作中必须要做的事~

本次方法的主要思路就是：外部容器固定宽高并超出隐藏，里面的容器如果高度超出，则滚动，宽度比外部容器宽一个滚动条的大小

1. 写一个容器1 宽度是你需要展示的宽度,超出隐藏

2. 在1的里面写一个宽度略微大于1的容器2

3. 容器2的宽度 = 容器1宽度+滚动条宽度

Html:

Css:

                 .div1{
                    width: 500px;
                    height: 200px;
                    margin: 0 auto;
                    overflow: hidden;
                 }
                 .div2{
                    height: 100%;
                 }
            

JS:

                $(function(){
                    var div = $(".div2")[0]; //获取div2
                    var scrollbarWidth = div.offsetWidth - div.scrollWidth; //div2的滚动条 = div2网页可见区域宽 - 获取div2的滚动宽度
                    var div1 = $(".div1").width(); //获取div1的宽度
                    $(".div2").width(div1 + scrollbarWidth); //div2宽度 = div1宽度+滚动条宽度
                });