项目地址 返回首页
  • 这里是内容1
  • 这里是内容2
  • 这里是内容3
  • 这里是内容4
  • 这里是内容5
  • 这里是内容6
  • 这里是内容7
  • 这里是内容8
  • 这里是内容9
  • 这里是内容10
  • 这里是内容11
  • 这里是内容12
  • 这里是内容13
  • 这里是内容14
  • 这里是内容15

执行默认参数,支持移动端触摸事件,pc拖拽滚动条,滚动区域鼠标可滚动。不传参数默认纵向滚动条。

new scrollbar(".sllb1");

  • 这里是内容1
  • 这里是内容2
  • 这里是内容3
  • 这里是内容4
  • 这里是内容5
  • 这里是内容6
  • 这里是内容7
  • 这里是内容8
  • 这里是内容9
  • 这里是内容10
  • 这里是内容11
  • 这里是内容12
  • 这里是内容13
  • 这里是内容14
  • 这里是内容15

{direction:'x'},滚动条的方向,"x"为横向,执行默认参数,支持移动端触摸事件,pc拖拽滚动条,滚动区域鼠标可滚动。不传参数默认纵向滚动条。

new scrollbar(".sllb2",{direction:'x'});

  • 这里是内容1
  • 这里是内容2
  • 这里是内容3
  • 这里是内容4
  • 这里是内容5
  • 这里是内容6
  • 这里是内容7
  • 这里是内容8
  • 这里是内容9
  • 这里是内容10
  • 这里是内容11
  • 这里是内容12
  • 这里是内容13
  • 这里是内容14
  • 这里是内容15

回调函数方法:

设置滚动到指定位置,获得滚轴和内容区的转换比

new scrollbar(".sllb3",{direction:'x'},function(api){
	api.slide(1210);
	var getRa= api.getRatio();
	//console.log(getRa)//0.13280212483399734
});

调用方法:

new scrollbar("selector",options,callback(api));

options参数

参数 默认值 说明
contentCls content 轮播内容列表的class
trackCls track 滑块的class
direction 'y' 滚动条的方向
steps 50 滚动鼠标中轴的单位
touchable true 是否允许触摸操作
autoReset true 窗体变化是否重置
inEndEffect false 滚轴到底时事件是否冒泡给页面
slide 0 默认移动的距离

callback(api)参数

方法 说明
slide(move) 滚动到指定位置
resize() 重置滚动条参数
getRatio() 获得滚轴和内容区的转换比