关于火狐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-sheightb = heightc = 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.clientYscrollTop = 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-sheightb = 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/2if(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>

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

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

css修改谷歌浏览器和火狐浏览器的滚动条样式
css代码谷歌浏览器滚动条样式: ::-webkit-scrollbar {background: #f7f7f9;width: .08rem; /* 纵向滚动条滑块宽度 */height: .09 ...
ie、火狐、谷歌浏览器隐藏滚动条
转载:https://www.cnblogs.com/liuyanxia/p/8675752.html 关于ie,火狐,谷歌浏览器滚动条的隐藏以及自定义样式最近做了一个项目,要求各个浏览器统一滚动条 ...
html关于强制显示、隐藏浏览器的滚动条
通过观察和调试,发现是该页面的垂直高度未溢出, 无法调用出垂直滚动条, 从而导致相对于其他页面居中时相差几个像素距离, 使得页面效果不够友好. 解决方案:将所有页面强制添加或者隐藏浏览器的滚动条即可. ...
在网页中的flash游戏，按方向键浏览器的滚动条会跟着滚动
今天总算把这个困扰我N久的问题给解决了,在我的flash游戏<牧场物语>中有方向键操作,但是在按上下方向键的时候浏览器右边的滚动条跟着滚动,也一上一下的,弄的我头晕,还让不让人活啊,今天终 ...
纯css解决div隐藏浏览器原生滚动条，但保留鼠标滚动效果的问题
纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题参考文章: (1)纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题 (2)https://www.cnblogs.co ...
打造前端 Deepin Linux 工作环境——安装最新版本的火狐firefox浏览器
打造前端 Deepin Linux 工作环境--安装最新版本的火狐firefox浏览器尝试使用 apt-get 命令安装火狐浏览器,但是,居然是 55 的版本,而最新的已经是 56 了.当然,这并不 ...
3.★Deepin Linux 下火狐firefox浏览器安装★
1.本人的笔记本是华为的 Deepin Linux ,自己一不小心删除了火狐firefox浏览器,所以又亲自安装上,所以分享一下. 2.打开终端,进入root xgj@xgj-PC:~$ su 密码: ...
用js实现复制内容到操作系统粘贴板(兼容IE、谷歌、火狐等浏览器)
一.如果只考虑IE浏览器,可以直接用原声js实现 if(window.clipboardData){//清空操作系统粘贴板window.clipboardData.clearData();//将需要复 ...
让火狐等浏览器也能使用HTC（HTML component）的方法
HTML组件(HTML conponent)是DTHML里的东西,相信现在大部分的web开发或者是网站都不使用DHTML了.它只能在IE下有直接的支持,它直接在样式表中用 behavior: url( ...

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

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

最新文章

热门文章