RICH-SCROLL-BAR

一个兼容到ie8的的滚动条

使用方法

给任意元素加上scroll属性即可实现滚动，scroll属性中可以写css样式，可以使用scroll-speed属性来改变滚动速度，大致如下：

<!-- 定义一个宽度为8，颜色为红色的滚动条，以标准速度的2倍进行滚动 -->
<div scroll="width:8px; background:#f00" scroll-speed="2">...</div>
 
<!-- 定义一个默认样式的滚动条，以标准速度滚动 -->
<div scroll>...</div>
 

动态添加滚动条

考虑到这个问题，在1.0.4版本中添加了动态添加滚动条的相关操作，我给window添加了一个函数richScroll，调用此函数即可，typescript定义如下：

function richScroll ( JQuery | HTMLElement ) : {
    clear:()=>any,
    reload:()=>any
}

下面是一个使用的例子：

 
function test(){
    $(document.body).append($('<div class="test-dom" scroll="width:10px; background:#888"></div>'))
    
    var dom = $('.test-dom')
    //也可以使用其他的浏览器原始方法，像是：
    // var dom = document.getElementsByClassName('test-dom')[0]
 
    //清除
    var scroll = richScroll(dom)
    $('.clear-btn').click(function(){
        scroll.clear()
    })
 
    //重新加载
    $('.reload-btn').click(function(){
        dom.attr('scroll', $('style-input').val())
        scroll.reload()
    })
}
 

特别说明

• 添加滚动属性的dom不能是输入框
• 添加滚动属性的dom的position必须是fixed、absolute、relativ之一
• 如果改变滚动区域里面的内容，需要对 .scroll-body 进行改动
• 当调用了clear方法之后，不要在调用别的方法(如：reload)，该调用是无效的