首页 > 代码库 > javascript自定义滚动条插件,几行代码的事儿

javascript自定义滚动条插件,几行代码的事儿

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

<!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‘;    }};

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

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