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:;

  padding:;

  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:;

  bottom:;

  /* top+bottom均为0，如果父元素height不为auto，就相当于height：100%的设置 */

  /* 但是这种写法再ie5中用js得不到高度，jq的height()方法和js的clientHeight都得不到 */

  right:;

  width: 11px;

  border-radius: 10px;

  height: 100%;

}

.scrollBar-bar{

  margin: 0 3px;

  border-radius: 10px;

  background: #b8c2ff;

  cursor: pointer;

  /* 关键代码,提前定位好改变top值进行滚动 */

  position: absolute;

  top:;

  right:;

  z-index:;

  left:;

}

.scrollCont{

  padding: 10px 0;

  /* 关键代码,提前定位好改变top值进行滚动 */

  position: absolute;

  top:;

  /* 注意下面这种写法 */

  right:;

  left:;

  /* left+right均为0，如果父元素width不为0，就相当于块元素的width：100%的设置 */

}

li{

  margin: 5px 0;

  padding: 5px 10px;

  cursor: pointer;

}

li:hover{

  background: #a3b0ff;

}

js：

 var firefox = navigator.userAgent.indexOf('Firefox') != -1;//监测火狐浏览器下使用兼容写法

 // 下拉滚动条

 //竖向的滚动条，四个参数，可视区域ID，内容区域Id，滚动条区域，滚动条，

 function ScrollTop(params){

   var $container = $(params.scrollBox),//可视区域

       $contanr   = $(params.scrollCont),//内容区域

       $conScroll = $(params.scrollBarBox),//滚动条活动区域

       $sroll     = $(params.scrollBar),//滚动条

         startY   = 0,//开始位置

         lastY    = 0,//结束位置

           YN     = false,//判断鼠标按下

             bBtn = true;//判断滚动条上滚还是下滚

   var $containerH = $container.height();

   var $contanrH = $contanr.outerHeight();

   // console.log($container.height())

   // console.log($conScroll.height())

   // console.log($contanr.outerHeight())

   // console.log($container.height()*$conScroll.height()/$contanr.outerHeight())

   function MouseScr(ev){

     var $containerH1 = $container.height();

     var $contanrH1 = $contanr.outerHeight();

     if($containerH1 >= $contanrH1){

       return false

     }else{

       var ev = ev || window.event,

         TopY = 0;

       if(ev.detail){

           bBtn = ev.detail>0  ?  true : false;

       }

       else{

           bBtn = ev.wheelDelta<0  ?  true : false;

       }

       if(bBtn){   //下

           TopY = $contanr.position().top-10;

       }

       else{  //上

           TopY = $contanr.position().top+10;

       }

       var maxTop = $contanr.outerHeight()-$container.outerHeight();

       TopY = TopY > 0 ? 0 : TopY;

       TopY = TopY < -maxTop ? -maxTop : TopY;

       // console.log($conScroll.outerHeight());

       $contanr.css({'top':TopY+'px'});

       $sroll.css({'top':$sroll.height()*Math.abs(TopY)/$conScroll.height()+'px'});

       if(ev.preventDefault){

           ev.preventDefault();

       }

       else{

           return false;

       }

     }

   }

   if( $containerH >= $contanrH){

     // console.log('remove scroll')

     $sroll.css('height',$containerH);

     // 禁止鼠标事件

     function MouseWheel(e) {

       // console.log('we')

       $contanr.css('top',0);

       $sroll.css('top',0);

       e = e || window.event;

       if (e.stopPropagation) e.stopPropagation();

       else e.cancelBubble = true;

       if (e.preventDefault) e.preventDefault();

       else e.returnValue = false;

       return false;

     };

     if(firefox){

       $contanr[0].removeEventListener('DOMMouseScroll',MouseScr,false);//兼容火狐。。。。。。。

       $conScroll[0].removeEventListener('DOMMouseScroll',MouseScr,false);

     }

     // console.log($contanr)

     // console.log($contanr[0])

     $contanr[0].onmousewheel = MouseWheel;

     $conScroll[0].onmousewheel = MouseWheel;

   }else{

     // 滚动条的高度等于可视区域高度*滚动区域高度/内容高度。

     $sroll.css({'height':$container.height()*$conScroll.height()/$contanr.outerHeight()+'px'});

     $sroll.mousedown(function(e){

       startY = e.clientY - this.offsetTop;

       this.setCapture && this.setCapture();//避免IE下拖拽过快鼠标失去对象

       YN = true;

       return false;

     });

     $sroll.mousemove(function(e){

       var maxVal = $conScroll.height() - $(this).height();

       if(YN){

           lastY = e.clientY - startY;

           lastY = lastY < 0 ? 0 :lastY;

           lastY = lastY > maxVal ? maxVal : lastY;

           $(this).css({'top':lastY+'px'});

           $contanr.css({'top':-$conScroll.height()*lastY/$(this).height()+'px'});

           window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // 防止拖动文本

           e.stopPropagation();

       }

       return false;

     });

     $sroll.mouseup(function(e){

       YN = false;

       NumY = lastY;

       return false;

     });

     //为内容区域添加滑轮滚动事件

     if($contanr[0].addEventListener){

       $contanr[0].addEventListener('DOMMouseScroll',MouseScr,false);//兼容火狐。。。。。。。对，不是ie是火狐。

       $conScroll[0].addEventListener('DOMMouseScroll',MouseScr,false);

     }

     $contanr[0].onmousewheel = MouseScr;

     $conScroll[0].onmousewheel = MouseScr;

   }

 }

 (function(){

   var params = {

     scrollBox : '#scrollBox',

     scrollCont : '#scrollCont',

     scrollBarBox : '#scrollBarBox',

     scrollBar : '#scrollBar'

   }

     /*注意： .height()方法不计算padding在内 */

     if($(scrollCont).height()>$(scrollBox).height()){

       $(scrollBar).css('visibility','visible');

       ScrollTop(params);

     }else{

       $(scrollBar).css('visibility','hidden');

     }

 })();

JS - 兼容到ie7的自定义样式的滚动条封装的更多相关文章

  1. js alert(“”）弹框 自定义样式

    首先用css渲染一个样式 #msg{ height: 2rem; text-align: center; position: fixed; top: 50%; margin-top: -1rem; l ...

  2. js兼容方法：获取当前样式|计算后样式 getStyle

    function getStyle(obj,attr){ if(obj.currentStyle){ //for IE return obj.currentStyle[attr]; }else{ re ...

  3. div错位/解决IE6、IE7、IE8样式不兼容问题

    IE6里DIV错位的问题    原文:chinafine 采用”FLOAT:LEFT“的DIV在IE8.IE7.都没问题,IE6下却向下移动,出现空白.这是因为,IE6采用的内核默认把DIV之间的距离 ...

  4. div错位解决IE6、IE7、IE8样式不兼容问题

    IE6里DIV错位的问题       采用”FLOAT:LEFT“的DIV在IE8.IE7.都没问题,IE6下却向下移动,出现空白.这是因为,IE6采用的内核默认把DIV之间的距离增加了3~5个PX, ...

  5. 解决IE5、IE6、IE7与W3C标准的冲突,使用(IE7.js IE8.js)兼容

    如果分别用IE5.IE6.IE7浏览同一个网页,将可能出现不一样的效果. 这是它们之间对CSS的解析选择器不一样或错误和个别bug所导致.为了解决这些错误和bug. 我们不得不找到一个能平衡于它们之间 ...

  6. js+css实现点击回到顶部的效果（最低兼容至ie7）

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 一步步开发自己的博客 .NET版 剧终篇（6、响应式布局 和 自定义样式）

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

  8. css js 兼容问题

    js  兼容问题 1. document.form.item 问题问题:代码中存在 document.formName.item("itemName") 这样的语句,不能在FF下运 ...

  9. 拖放排序插件Sortable.js 兼容好及功能全个人觉得比dragula.js 好的多

    经测试,Sortable.js 兼容好和使用方便都是比较不错的,特别手机端使用很棒 介绍 Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大)下载地址:https: ...

随机推荐

  1. (转)DSound开发常用的几个结构

    WAVEFORMATEX WAVEFORMATEX { WORD wFormatTag; WORD nChannels; DWORD nSamplesPerSec; DWORD nAvgBytesPe ...

  2. MAC 查看端口占用

    命令 lsof -i tcp:[port]  (port替换成端口号,比如6379)可以查看该端口被什么程序占用,并显示PID,方便KILL 之后,kill -9  [PID] , kill进程即可 ...

  3. ubuntu16.04 桌面图标左侧，右侧，底部进行切换

    转载:https://jingyan.baidu.com/article/e52e36154e6af340c60c518c.html 传统的 Unity 桌面环境,其应用程序启动器的容器——Launc ...

  4. npm安装包卡住不动的解决

    最近诸事不顺,今天更新/安装nodejs各种包也全都卡在各个环节,用ie设了全局代理貌似也没什么改观,于是到网上找找有没有国内镜像站,倒是发现了cnpmjs.org这个网站被推荐比较多,看他们主页,他 ...

  5. vim 编辑器常用命令

    vi 常用命令行 1.vi 模式 a) 一般模式: vi 处理文件时,一进入该文件,就是一般模式了. b) 编辑模式:在一般模式下可以进行删除,复制,粘贴等操作,却无法进行编辑操作.等按下‘i,I,o ...

  6. git恢复删除的分支及内容

    git 删除分支git branch -D 分支名 git查看分支 git branch -a git 删除远程分支 git push origin :分支名 这里注意:git分支提交并且push了, ...

  7. ABBYY FineReader 14助力2017，正式进入新纪元

    ABBYY FineReader 12自2014年推出以来,已经给万千用户的工作带来了便捷,蝉联优秀殊荣这么久,相信不少用户早在期待新版本的到来了吧.这不,ABBYY FineReader 14问世了 ...

  8. BarTender怎么打印公式化的三列标签

    有小伙伴在业务上有这样的需求:使用BarTender打印一行三列的标签,如下A,B,C三个并排.第一行 A1=a B1=a*2-1 C1=a*2:第二行 A2=a+1 B2=(a+1)*2-1 C2= ...

  9. VS常用快捷鍵

    折疊所有方法 Ctrl +M +M 折疊單個方法 Ctrl +M +O 折疊單個方法

  10. MYSQL列中的数据以逗号隔开，如何查询

    FROM `task_detatils` WHERE FIND_IN_SET( '1', responsible_user) 将含有1的responsible_user列数据全部搜索出来