jQuery插件之slimScroll滚动条

##slimScroll滚动条
###作用:

  1. 将任何div转换成一个带有滚动条的可滚动区域。

  2. slimScroll不占用任何视觉空间,因为它只出现在用户鼠标移入到这个div上的时候。

当用户进行onmouseover等鼠标移入的动作,滚动条才会显示出来。用户可以拖动滚动条或使用鼠标滚轮改变滚动值。
jQuery插件之slimScroll滚动条_第1张图片

###用法:

  1. 首次使用的时候要先引入JQuery再引入.slimScroll插件


  1. 在将要设置的内容外加div元素包裹
//这里是需要使用滚定条的代码
  1. 调用slimscroll插件及设置参数:
$(".obj_tab_body").slimScroll({
height: '100%',
alwaysVisible: true,
wheelStep: 5,
});

####notice:
在项目中,用在列表右侧的滚动条,是为了不占空间,因为浏览器自带的滚动条太宽。导致列表数据不对齐的bug.这段js代码是写在请求列表接口的方法里面
eg:

$scope.getResourceList = function () {

$scope.api.get($scope.list_params, function (data) {
$scope.resourceList = data.record;

setTimeout(function () {
$("#hide_header").html($("#dis_header").html())
}, 200)


$(".obj_tab_body").slimScroll({
height: '100%',
alwaysVisible: true,
wheelStep: 5,
});
$scope.list_params.total = data.total;
$scope.resourcePageInit();
})
}

你可能感兴趣的:(jquery)