JS - 兼容到ie7的自定义样式的滚动条封装
demo：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="guojufeng">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>兼容到ie7的自定义滚动条</title>
<link rel="stylesheet" href="scrollStyle.css">
</head>
<body>
<div class="box" id="scrollBox">
<!-- 滚动条 -->
<div class="scrollBar-area" id="scrollBarBox">
<div class="scrollBar-bar" id="scrollBar"></div>
</div>
<ul class="scrollCont" id="scrollCont">
<li>
<span>滚动效果第一项</span>
</li>
<li>
<span>滚动效果第一项</span>
</li>
<li>
<span>滚动效果第一项</span>
</li>
<li>
<span>滚动效果第一项</span>
</li>
<li>
<span>滚动效果第一项</span>
</li>
<li>
<span>滚动效果第一项</span>
</li>
<li>
<span>滚动效果第一项</span>
</li>
<li>
<span>滚动效果第一项</span>
</li>
</ul>
</div>
<script src='http://libs.baidu.com/jquery/1.7.1/jquery.min.js'></script>
<script src="scrolldown.js"></script>
</body>
</html>css：
html.body,li,ul{
margin: 0;
padding: 0;
list-style: none;
}
body{
padding-top: 45px;
padding-left: 50px;
}
.box{
position: relative;
padding: 0px 11px;
background: #dbe0ff;
width: 300px;
height: 180px;
overflow: hidden;
}
.scrollBar-area{
position: absolute;
/* 注意下边这种写法 */
top: 0;
bottom: 0;
/* top+bottom均为0，如果父元素height不为auto，就相当于height：100%的设置 */
/* 但是这种写法再ie5中用js得不到高度，jq的height()方法和js的clientHeight都得不到 */
right: 0;
width: 11px;
border-radius: 10px;
height: 100%;
}
.scrollBar-bar{
margin: 0 3px;
border-radius: 10px;
background: #b8c2ff;
cursor: pointer;
/* 关键代码,提前定位好改变top值进行滚动 */
position: absolute;
top: 0;
right: 0;
z-index: 1;
left: 0;
}
.scrollCont{
padding: 10px 0;
/* 关键代码,提前定位好改变top值进行滚动 */
position: absolute;
top: 0;
/* 注意下面这种写法 */
right: 0;
left: 0;
/* left+right均为0，如果父元素width不为0，就相当于块元素的width：100%的设置 */
}
li{
margin: 5px 0;
padding: 5px 10px;
cursor: pointer;
}
li:hover{
background: #a3b0ff;
}js：
1 var firefox = navigator.userAgent.indexOf('Firefox') != -1;//监测火狐浏览器下使用兼容写法
2 // 下拉滚动条
3 //竖向的滚动条，四个参数，可视区域ID，内容区域Id，滚动条区域，滚动条，
4 function ScrollTop(params){
5 var $container = $(params.scrollBox),//可视区域
6 $contanr = $(params.scrollCont),//内容区域
7 $conScroll = $(params.scrollBarBox),//滚动条活动区域
8 $sroll = $(params.scrollBar),//滚动条
9 startY = 0,//开始位置
10 lastY = 0,//结束位置
11 YN = false,//判断鼠标按下
12 bBtn = true;//判断滚动条上滚还是下滚
13 var $containerH = $container.height();
14 var $contanrH = $contanr.outerHeight();
15 // console.log($container.height())
16 // console.log($conScroll.height())
17 // console.log($contanr.outerHeight())
18 // console.log($container.height()*$conScroll.height()/$contanr.outerHeight())
19 function MouseScr(ev){
20 var $containerH1 = $container.height();
21 var $contanrH1 = $contanr.outerHeight();
22 if($containerH1 >= $contanrH1){
23 return false
24 }else{
25 var ev = ev || window.event,
26 TopY = 0;
27 if(ev.detail){
28 bBtn = ev.detail>0 ? true : false;
29 }
30 else{
31 bBtn = ev.wheelDelta<0 ? true : false;
32 }
33 if(bBtn){ //下
34 TopY = $contanr.position().top-10;
35 }
36 else{ //上
37 TopY = $contanr.position().top+10;
38 }
39 var maxTop = $contanr.outerHeight()-$container.outerHeight();
40 TopY = TopY > 0 ? 0 : TopY;
41 TopY = TopY < -maxTop ? -maxTop : TopY;
42 // console.log($conScroll.outerHeight());
43 $contanr.css({'top':TopY+'px'});
44 $sroll.css({'top':$sroll.height()*Math.abs(TopY)/$conScroll.height()+'px'});
45
46 if(ev.preventDefault){
47 ev.preventDefault();
48 }
49 else{
50 return false;
51 }
52 }
53 }
54 if( $containerH >= $contanrH){
55 // console.log('remove scroll')
56 $sroll.css('height',$containerH);
57 // 禁止鼠标事件
58 function MouseWheel(e) {
59 // console.log('we')
60 $contanr.css('top',0);
61 $sroll.css('top',0);
62 e = e || window.event;
63 if (e.stopPropagation) e.stopPropagation();
64 else e.cancelBubble = true;
65 if (e.preventDefault) e.preventDefault();
66 else e.returnValue = false;
67 return false;
68 };
69 if(firefox){
70 $contanr[0].removeEventListener('DOMMouseScroll',MouseScr,false);//兼容火狐。。。。。。。
71 $conScroll[0].removeEventListener('DOMMouseScroll',MouseScr,false);
72 }
73 // console.log($contanr)
74 // console.log($contanr[0])
75 $contanr[0].onmousewheel = MouseWheel;
76 $conScroll[0].onmousewheel = MouseWheel;
77 }else{
78 // 滚动条的高度等于可视区域高度*滚动区域高度/内容高度。
79 $sroll.css({'height':$container.height()*$conScroll.height()/$contanr.outerHeight()+'px'});
80 $sroll.mousedown(function(e){
81 startY = e.clientY - this.offsetTop;
82 this.setCapture && this.setCapture();//避免IE下拖拽过快鼠标失去对象
83 YN = true;
84 return false;
85 });
86 $sroll.mousemove(function(e){
87 var maxVal = $conScroll.height() - $(this).height();
88 if(YN){
89 lastY = e.clientY - startY;
90 lastY = lastY < 0 ? 0 :lastY;
91 lastY = lastY > maxVal ? maxVal : lastY;
92
93 $(this).css({'top':lastY+'px'});
94 $contanr.css({'top':-$conScroll.height()*lastY/$(this).height()+'px'});
95 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // 防止拖动文本
96 e.stopPropagation();
97 }
98
99 return false;
100 });
101
102 $sroll.mouseup(function(e){
103 YN = false;
104 NumY = lastY;
105 return false;
106 });
107 //为内容区域添加滑轮滚动事件
108 if($contanr[0].addEventListener){
109 $contanr[0].addEventListener('DOMMouseScroll',MouseScr,false);//兼容火狐。。。。。。。对，不是ie是火狐。
110 $conScroll[0].addEventListener('DOMMouseScroll',MouseScr,false);
111 }
112 $contanr[0].onmousewheel = MouseScr;
113 $conScroll[0].onmousewheel = MouseScr;
114 }
115 }
116 (function(){
117 var params = {
118 scrollBox : '#scrollBox',
119 scrollCont : '#scrollCont',
120 scrollBarBox : '#scrollBarBox',
121 scrollBar : '#scrollBar'
122 }
123 /*注意： .height()方法不计算padding在内 */
124 if($(scrollCont).height()>$(scrollBox).height()){
125 $(scrollBar).css('visibility','visible');
126 ScrollTop(params);
127 }else{
128 $(scrollBar).css('visibility','hidden');
129 }
130 })();本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-09-21 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读