在实际项目中，经常由于浏览器自带的滚动条样式太戳，而且在各个浏览器中显示不一样，所以我们不得不去实现自定义的滚动条，今天我就用最少的代码实现了一个自定义滚动条，代码量区区只有几十行，使用起来也非常方便。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>自定义滚动条</title>

<style type="text/css">

body,ul,dl,dd{ margin:0; padding:0; font-size:12px; font-family:'微软雅黑';}

.clear{ zoom:1}

.clear:after{ display:block; content:""; clear:both}

.box{margin:28px auto; width:164px; height:440px; background:#000; padding:8px;}

#wrap{ width:170px; height:386px; background:#1c1c1d; overflow:hidden; position:relative; }

#listbox{ float:left; width:160px; position:absolute; left:0; top:0; }

#scrollbox{ float:right; width:3px; height:386px; background: #333; position:relative;}

#scrollbar{ width:3px; height:30px; background:#cc3f2e; position:absolute; left:0; top:0;}

li{ height:80px; margin-bottom:8px; list-style:none;}

.picbox,.div{ float:left;}

.picbox{ width:150px; position:relative; }

.picbox span{ position:absolute; left:0px; bottom:0px; width:90px; height:22px;}

dl{ width:139px; height:76px; color:#fff; padding:4px 0 0 10px;line-height:18px; position:absolute;left:0; top:0; opacity:0.2; filter:alpha(opacity=20); }

.div{width:149px; height:80px; position:relative; }

.mark{width:149px; height:80px; position:absolute; top:0; left:0; background:#fff; opacity:0.1; filter:alpha(opacity=10);}

.nav{ width:160px; height:35px; font-family:'微软雅黑';background:#1c1c1d; padding-top:5px;}

.a,.b{ width:152px; height:24px; line-height:24px; background:#666; text-align:center; float:left; color:#fff; cursor:pointer}

.a{margin-right:5px; display:inline; background:#333; color:#666; }

li.active .mark{opacity:0.2; filter:alpha(opacity=20);}

li.active dl{ opacity:0.7; filter:alpha(opacity=70);}

</style>

</head>

<body>

  <div class="box">

    <div class="nav">

      <div class="a">猜你喜欢</div>

    </div>

    <div id="wrap">

      <ul id="listbox">

        <li class="active">

          <div class="picbox">

            <span class="a1"></span>

          </div>

          <div class="div">

            <div class="mark"></div>

            <dl class="textbox">

              <dt>飞狐外传</dt>

              <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>

              <dd>史上身材最棒狐仙</dd>

            </dl>

          </div>

        </li>

        <li>

          <div class="picbox">

            <span class="a2"></span>

          </div>

          <div class="div">

            <div class="mark"></div>

            <dl class="textbox">

              <dt>飞狐外传</dt>

              <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>

              <dd>史上身材最棒狐仙</dd>

            </dl>

          </div>

        </li>

        <li>

          <div class="picbox">

            <span class="a2"></span>

          </div>

          <div class="div">

            <div class="mark"></div>

            <dl class="textbox">

              <dt>飞狐外传</dt>

              <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>

              <dd>史上身材最棒狐仙</dd>

            </dl>

          </div>

        </li>

        <li>

          <div class="picbox">

            <span></span>

          </div>

          <div class="div">

            <div class="mark"></div>

            <dl class="textbox">

              <dt>飞狐外传</dt>

              <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>

              <dd>史上身材最棒狐仙</dd>

            </dl>

          </div>

        </li>

        <li>

          <div class="picbox">

          </div>

          <div class="div">

            <div class="mark"></div>

            <dl class="textbox">

              <dt>飞狐外传</dt>

              <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>

              <dd>史上身材最棒狐仙</dd>

            </dl>

          </div>

        </li>

        <li>

          <div class="picbox">

          </div>

          <div class="div">

            <div class="mark"></div>

            <dl class="textbox">

              <dt>飞狐外传</dt>

              <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>

              <dd>史上身材最棒狐仙</dd>

            </dl>

          </div>

        </li>

        <li>

          <div class="picbox">

          </div>

          <div class="div">

            <div class="mark"></div>

            <dl class="textbox">

              <dt>飞狐外传</dt>

              <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>

              <dd>史上身材最棒狐仙</dd>

            </dl>

          </div>

        </li>

        <li>

          <div class="picbox">

          </div>

          <div class="div">

            <div class="mark"></div>

            <dl class="textbox">

              <dt>飞狐外传</dt>

              <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>

              <dd>史上身材最棒狐仙</dd>

            </dl>

          </div>

        </li>

        <li>

          <div class="picbox">

          </div>

          <div class="div">

            <div class="mark"></div>

            <dl class="textbox">

              <dt>飞狐外传</dt>

              <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>

              <dd>史上身材最棒狐仙</dd>

            </dl>

          </div>

        </li>

        <li>

          <div class="picbox">

          </div>

          <div class="div">

            <div class="mark"></div>

            <dl class="textbox">

              <dt>飞狐外传</dt>

              <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>

              <dd>史上身材最棒狐仙</dd>

            </dl>

          </div>

        </li>

        <li>

          <div class="picbox">

          </div>

          <div class="div">

            <div class="mark"></div>

            <dl class="textbox">

              <dt>飞狐外传</dt>

              <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>

              <dd>史上身材最棒狐仙</dd>

            </dl>

          </div>

        </li>

      </ul>

      <div id="scrollbox">

        <div id="scrollbar"></div>

      </div>

    </div>

  </div>

</body>

<script src="tinyScroll.js"></script>

<script>

    new tinyScroll({

        wrapBox : document.getElementById('wrap'),

        wrapList : document.getElementById('listbox'),

        scrollBox :document.getElementById('scrollbox'),

        scrollBar : document.getElementById('scrollbar')

    })

</script>

</html>

然后引入滚动条插件：

/**

 * javascript自定义滚动条(滚动条高度可以动态改变)

 * @param opts

 * 调用方式

 * new tinyScroll({

        wrapBox : document.getElementById('wrap'),

        wrapList : document.getElementById('listbox'),

        scrollBox :document.getElementById('scrollbox'),

        scrollBar : document.getElementById('scrollbar')

    })

 */

function tinyScroll(opts) {

    this.wrapBox = opts.wrapBox;

    this.wrapList = opts.wrapList;

    this.scrollBox = opts.scrollBox;

    this.scrollBar = opts.scrollBar;

    this.scale = 0;

    this.height = 0;

    this.maxTop = 0;

    this.ListMaxTop = 0;

    this.top = 0;

    this.bindEvent();

}

tinyScroll.prototype = {

    constructor: tinyScroll,

    init: function() {

        this.scale = this.wrapBox.clientHeight / this.wrapList.scrollHeight;

        if (this.scale > 1) this.scale = 1;

        this.height = this.scale * this.scrollBox.scrollHeight;

        this.maxTop = this.scrollBox.scrollHeight - this.height;

        this.ListMaxTop = this.wrapBox.clientHeight - this.wrapList.scrollHeight;

        if (this.scale == 1) this.scrollBox.style.display = 'none';

        this.scrollBar.style.height = this.height + 'px';

    },

    bindEvent: function() {

        var that = this;

        var mouseScroll = function(ev) {

            ev = ev || event;

            var fx = ev.wheelDelta || ev.detail;

            var bDown = true;

            if (ev.detail) {

                bDown = fx > 0 ? true: false;

            } else {

                bDown = fx > 0 ? false: true;

            }

            if (bDown) {

                that.top += 10;

            } else {

                that.top -= 10;

            }

            that.fnScroll();

            if (ev.preventDefault) {

                ev.preventDefault();

            }

            return false;

        };

        this.init();

        this.scrollBar.onmousedown = function(ev) {

            ev = ev || event;

            var disY = ev.clientY - this.offsetTop;

            document.onmousemove = function(ev) {

                ev = ev || event;

                that.top = ev.clientY - disY;

                that.fnScroll();

            };

            document.onmouseup = function() {

                document.onmouseup = document.onmousemove = null;

            };

            return false;

        };

        this.wrapBox.onmousewheel = mouseScroll;

        if (this.wrapList.addEventListener) {

            this.wrapList.addEventListener('DOMMouseScroll', mouseScroll, false);

        }

    },

    fnScroll: function() {

        if (this.top < 0) this.top = 0;

        if (this.top > this.maxTop) this.top = this.maxTop;

        var scale = this.top / this.maxTop;

        var listTop = scale * this.ListMaxTop;

        this.scrollBar.style.top = this.top + 'px';

        this.wrapList.style.top = listTop + 'px';

    }

};

将所贴代码复制到编辑器中进行预览吧，是不是感觉特酷！

这里的滚动条样式你想设计成那样都行，给予你充分的发挥空间，是不是感觉挺爽！

javascript自定义滚动条插件，几行代码的事儿的更多相关文章

  1. 分享一个开源的JavaScript统计图表库，40行代码实现专业统计图表

    提升程序员工作效率的工具/技巧推荐系列 推荐一个功能强大的文件搜索工具SearchMyFiles 介绍一个好用的免费流程图和UML绘制软件-Diagram Designer 介绍Windows任务管理 ...

  2. JavaScript模板引擎原理，几行代码的事儿

    一.前言 什么是模板引擎,说的简单点,就是一个字符串中有几个变量待定.比如: var tpl = 'Hei, my name is <%name%>, and I\'m <%age% ...

  3. JavaScript学习笔记- 自定义滚动条插件

    此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-us ...

  4. JavaScript-JQ实现自定义滚动条插件1.0

    此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-us ...

  5. Jquery自定义滚动条插件

    下载地址:http://files.cnblogs.com/files/LoveOrHate/jquery.nicescroll.min.js <script src="jquery. ...

  6. 自定义滚动条插件 mCustomScrollbar 使用介绍

    引用有心的学士笔记 http://www.wufangbo.com/mcustomscrollbar/ http://www.jianshu.com/p/550466260856 官网地址 http: ...

  7. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  8. 自定义滚动条 - mCustomScrollbar

    项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-cust ...

  9. 如何创建一个自定义jQuery插件

    简介 jQuery 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...

随机推荐

  1. dedecms \plus\guestbook.php SQL Injection Vul By \plus\guestbook\edit.inc.php

    catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 注射漏洞成功需要条件如下 . php magic_quotes_gpc= ...

  2. 使用 BASH 作为 CGI 进行 HTTP 文件上传

    憋半天憋出这么点代码来,暂时凑合可以用...需要手动删除文件末尾的分隔符,还有一个windows 换行: #!/bin/bash newline="" while true; do ...

  3. TextView里限制输入字数的方法

    一开始采用的方法是函数textView:shouldChangeTextInRange:replacementText:来进行判断: //键入Done时,插入换行符,然后执行addBookmark - ...

  4. Beta Daily Scrum 第四天

    [目录] 1.任务进度 2.困难及解决 3.燃尽图 4.代码check-in 5.站立会议图 6.总结 1. 任务进度 学号 今日完成 明日完成 612 完成成就界面的统计图表 继续编写成就界面的图表 ...

  5. ruby 淘宝镜像

    由于国内GFW原因,导致无法安装gem库文件.故选择淘宝镜像, 如何使用? $ gem sources --remove https://rubygems.org/ $ gem sources -a ...

  6. Linux下shell脚本中信号捕获和函数练习脚本之ping一个网段

    该脚本主要的目的是练习在Linux bash脚本中捕获信号,顺便练习一下函数的使用,还有就是终止一个正在运行的程序后,该程序打开的文件的后续处理问题等等!脚本功能:  ping一个网段内的IP,检测哪 ...

  7. 常见linux命令释义（第二天）

    查看磁盘与目录的容量. df 与du df  是英语Disk Free的意思.磁盘空余. df -h  -h中h指的是一human(人类)的角度,即用GB,MB的格式显示.这个比较常用,还有其他的选项 ...

  8. HTML5学习总结-10 Android 控件WebView显示网页

    WebView可以使得网页轻松的内嵌到app里,还可以直接跟js相互调用. webview有两个方法:setWebChromeClient 和 setWebClient 1)setWebClient: ...

  9. HD1160FatMouse's Speed(最长单调递增子序列）

    FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  10. ionic中获取坐标方法

    ionic中获取坐标的方法 1.首相需要执行命令: cordova plugin add cordova-plugin-geolocation2.然后块级注入配置bower文件引入ngCordova ...