关于火狐IE浏览器的滚动条问题

1.找到加入滚动条的位置：

<div class="modal-dialog" style="height:90%; overflow-y: auto;">

2.(发现问题) 隐藏滚动条后：二次进入滚动条不起作用

overflow: hidden;

3.关于改变滚动条的资料
https://www.cnblogs.com/tzdy/p/5987549.html
https://www.lyblog.net/detail/314.html

4.成果：
谷歌的滚动条样式：

/*谷歌*/
    /*定义滚动条轨道*/
    ::-webkit-scrollbar-track
    {
        width: 3px;
        background-color: #F5F5F5;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
    }
    /*定义滚动条高宽及背景*/
        /*webkit-scrollbar是滚动条整体部分*/
    ::-webkit-scrollbar
    {
        width: 3px;
        height: 3px;
        background-color: rgba(0, 0, 0, 0.34);
    }
    /*定义滚动条*/
        /*滚动条里面的小方块，能向上向下移动*/
    ::-webkit-scrollbar-thumb
    {
        width: 3px;
        background-color: #8b8b8b;
        border-radius: 10px;
    }

隐藏IE的滚动条：

/*IE*/
html {
    /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
    -ms-overflow-style:none;
}

关于火狐浏览器滚动条问题，两种解决方法：
1.写一个带有overflow-y: hidden 的div 嵌套在带有overflow-y: scroll 的div之外。
良心资料：https://www.cnblogs.com/liuyanxia/p/8675752.html
自己实践：

   <div style=" overflow-y: hidden;overflow-x: hidden;width:100%">  <div style=" overflow-y: hidden;overflow-x: hidden;width:100%">
            <div style=" overflow-y: scroll;overflow-x: hidden;height:650px;width:102%">
                <div >你的需要加滚动条的div</div>
            </div>
   </div>

height、外层div的width、内层div的width根据自己情况进行调节。
2.写原生态的滚动条JS
良心资料：https://blog.csdn.net/zhaoxiang66/article/details/73464632
自己实践：由于我想要做的是模态框中的滚动条滚动，并且是嵌套模态框滚动条，因此改了部分代码：

 <style type="text/css">
    html {
        /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
        -ms-overflow-style:none;
    }
    #d1{
        height:600px;
        width: 500px;
        overflow-y: hidden;
        position: relative;
    }
    #d3{
        position: relative;
        top:0px;
        padding-right:8px;
    }
    .outz{
        width: 0px;
        height:100%;
        position: absolute;/*显示滚动条*/
        top:0px;
        right:0px;
        background-color: #ddd;/*颜色*/
        border-radius: 8px;/*圆角样式*/

    }
    .inz{
        width: 0px;
        border-radius: 8px;
        background: rgba(185, 0, 15, 0.79);
        position: absolute;
        top:6px;
        right:2px;
    }
</style>

html模态框部分：

<div id ="d1">
      <div id = 'd3'>
      需要添加滚动条的部分
      </div>
      <div class="outz">
             <div class="inz" style="cursor: default;"></div>
      </div>
 </div>

js部分：基本跟资料中写的一样，但模态框的高度，我是通过浏览器当前可视窗口的高度取得。
var aa=$(window).height();

<script type="text/javascript">
var a = 0;
var b = 0;
var aa=$(window).height();//浏览器当前窗口可视区域高度
var height= aa ;
var height2= aa*0.2 ;
var outz = document.querySelector('.outz')//滚动条外面的容器
var parent = outz.parentNode;//滚动条外面的容器的父元素
var child = parent.children[0];//包裹超出内容长度的容器
var height1 = height;//外面容器高度
//里面的容器和外面的容器的高度差，也就是里面容器的top值的改变
var scroll = document.querySelector('.inz');//滚动条
scroll.style.height = height1*0.2 + 'px';//设置滚动条的高度
var sheight = getComputedStyle(scroll).height.slice(0,-2);//获得滚动条的高度
var speed = sheight/8;
var x = (height*speed)/(height1-sheight);//获得里面被隐藏的容器的top改变速度，外面的改变速度是6px
var c = true;
// 取消默认滚动事件
// 恢复默认滚动事件
parent.onmouseleave = function(){
    c = true;
}
parent.onmousemove = function(){
    c = false;
}
var cancelChorme = function(){
    parent.addEventListener('mousewheel',function(e){
        document.addEventListener('mousewheel', function(event){
            if(c == false){
                event.preventDefault();
            }
        }, false);
    })
}
cancelChorme();

var cancelFox = function(){
    parent.addEventListener('DOMMouseScroll',function(e){
        document.addEventListener('DOMMouseScroll', function(event){
            if(c == false){
                event.preventDefault();
            }
        }, false);
    })
}
cancelFox();
//chorme、IE的滚动条
parent.addEventListener('mousewheel',function(event){
    if(event.wheelDelta > 0){//向上滚动
        if(a > 6 && b <= height){
            a -= speed;
            b -= x;
        }else{
            a = 6;
            b = -4;
            c = true;
        }
    }else{
        if(a <= height1-sheight && b < height){//向下滚动
            a += speed;
            b += x;
        }else{
            a = height1-sheight
            b = height
            c = true;
        }
    }
    scroll.style.top = a+'px';
    child.style.top = -b+'px';
})
var p1;
var p2;
var p3;
var scrollTop;
var speed2;
var move = function(event){
    p2 = event.clientY;
    p3 = parseFloat(p2 - p1);
    console.log('p3',p3);
    console.log('scroll.style.top',scrollTop);
    speed2 = (height*(scrollTop + p3))/(height1-sheight);
    if((scrollTop+p3) > 6 && speed2 <= height){
        scroll.style.top = (scrollTop + p3) +'px';
        a = (scrollTop + p3);
        b = speed2;
        child.style.top = -speed2+'px';
    }else{
        scroll.style.top = '6px';
        speed2 = -4;
        c = true;
    }
    if((scrollTop + p3) <= height1-sheight && speed2 < height){//向下滚动
        if((scrollTop + p3) > 6)
            scroll.style.top = (scrollTop + p3) +'px';
        a = (scrollTop + p3);
        b = speed2;
        child.style.top = -speed2+'px';
    }else{
        scroll.style.top = (height1-sheight) + 'px';
        speed2 = height;
        c = true;
    }
}
//利用mousedown mousemove mouseup使滚动条能够拖拽
scroll.addEventListener("mousedown",function(event){
    console.log("mousedown事件")
    console.log(event.offsetY);
    p1 = event.clientY
    scrollTop = parseFloat(getComputedStyle(scroll).top.slice(0,-2))
    scroll.addEventListener("mousemove",move)
})
scroll.addEventListener("mouseup",function(){
    scroll.removeEventListener("mousemove",move)
})
scroll.addEventListener("mouseleave",function(){
    scroll.removeEventListener("mousemove",move)
    scrollState = false;
})
parent.addEventListener('DOMMouseScroll',function(event){//火狐
    console.log(event.detail);
    if(event.detail > 0){//向下滚动
        if(a <= height1-sheight && b < height){
            a += 6;
            b += x;
        }else{
            a = height1-sheight
            b = height
        }
    }else{//向下滚动
        if(a > 6 && b <= height){
            a -= 6;
            b -= x;
        }else{
            a = 6;
            b = -4;
        }
    }
    scroll.style.top = a+'px';
    child.style.top = -b+'px';
})
//利用click事件来可以让滚动条点击滚动
//定义状态看是不是在滚动条内
var scrollState = false;
scroll.addEventListener("mouseenter",function(){
    scrollState = true;
})
outz.addEventListener("click",function(event){
    if(scrollState == false){
        console.log(event.offsetY)
        var clientHeight = event.offsetY -sheight/2
        if(clientHeight < 6){
            clientHeight = 6;
        }
        console.log(height);
        var y = height2 * (clientHeight/(height1-sheight/2))
        if(y > height){
            y = height;
            clientHeight = height1-sheight
        }
        scroll.style.top = clientHeight + 'px';
        a = clientHeight;
        child.style.top = -y +'px';
        b = y;
    }
})
</script>

找了一天多资料，总算成功。欢迎大家补充：—）