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 })();

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Nian糕的私人厨房

CSS 基础

层叠样式表 (Cascading Style Sheets),一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语...

13440
来自专栏前端之路

–探索CSS3动画、过渡

15850
来自专栏水击三千

android 补间动画

android开发过程中,为了更好的展示应用程序,应用程序添加动画,能够很好地实现这个功能。如果动画中的图像变化有一定的规律,可以采用自动生成图像的方式来生成动...

269100
来自专栏Android小菜鸡

自定义View学习之路(二)————Paint与Canvas

  Canvas可以理解为画布,配置好画笔后,我们可以调用Canvas的各种绘制方法。   绘制直线:canvas.drawLine(float startX...

10810
来自专栏三木的博客

CSS概要

CSS 基础知识 语法 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式, 如文字...

20550
来自专栏欧阳大哥的轮子

iOS界面布局的核心以及TangramKit介绍

TangramKit是iOS系统下用Swift编写的第三方界面布局框架。他集成了iOS的AutoLayout和SizeClass以及Android的五大容器布局...

14030
来自专栏CaiRui

CSS再学

css的注释 /*.......*/ 直接在html代码中写css <p style="color: rebeccapurple;font-size: 18px...

19370
来自专栏腾讯IVWEB团队的专栏

Canvas 实现 progress 效果

分享下一个简单的Canvas插件 ,Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像,你可以使用javascript用它来绘制图形。

63500
来自专栏抠抠空间

css属性详解

一、字体属性 字体   font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识...

31890
来自专栏向治洪

css3动画从入门到精通

什么是css3动画? 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 CSS3带来了圆角,半透明...

42260

扫码关注云+社区

领取腾讯云代金券