1.0.4 • Published 6 years ago

rich-scroll-bar v1.0.4

Weekly downloads
2
License
ISC
Repository
github
Last release
6 years ago

RICH-SCROLL-BAR

一个兼容到ie8的的滚动条

Alt text

使用方法

给任意元素加上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),该调用是无效的