關於火狐IE瀏覽器的滾動條問題
阿新 • • 發佈：2019-01-10
1.找到加入滾動條的位置：
<div class="modal-dialog" style="height:90%; overflow-y: auto;">
2.(發現問題) 隱藏滾動條後：二次進入滾動條不起作用
overflow: hidden;
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>
找了一天多資料，總算成功。歡迎大家補充：—）