Tiny Scrollbar 基于 jQuery 轻量级的滚动条插件

Question

Tiny Scrollbar 可用于滚动显示的内容。它始建使用 JavaScript jQuery 库。Tiny Scrollbar 被设计成一个动态的轻量级的工具，让网页设计师强大的方式提高一个网站的用户界面。 Tiny Scrollbar 支持iPhone，iPhone 和 Android，它可以滚动内容的垂直和水平可定制的轻松和翻转滚动支持的正常滚动和移动式。

插件特点

• 支持 iPhone, iPad, Android
• 新版 1.8，可以在移动设备上滚动内容
• 可以在水平方向和垂直方向滚动
• 支持滚轮、拇指、跟踪、触摸。
• 它有一个更新函数,这样它就可以处理内容的变化。
• 拇指大小的滚动条,可以设置为自动或固定数量
• 容易定制
• 支持正常的滚动和移动风格转化的滚动。
• 轻量级其只有 100 行代码。大小是 2,29 kb
• 样式可以自己设置，很自由。

使用方法

使用的方法很简单。前提你要调用 jQuery 文件，像这样：

<link rel="stylesheet" href="css/common.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.tinyscrollbar.min.js"></script>

接下来我们来看一下具体是怎么使用的？引入 jQuery 文件后，只需在页面调用：

$('#scrollbar1').tinyscrollbar();

X 轴滚动条

$("#scrollbar2").tinyscrollbar({ axis: "x"});

滚动条的大小可以通过 size 选项设置为一个固定的数字。

$("#scrollbar3").tinyscrollbar({ trackSize: 100 });

滚动条滑块的大小可以通过 size 选项设置为一个固定的数字。

$("#scrollbar4").tinyscrollbar({ thumbSize: 15 })

为了补偿内容中的更改，可以调用 tinyscrollbar 更新函数

var $scrollbar5 = $("#scrollbar5");
$scrollbar5.tinyscrollbar();
var scrollbar5 = $scrollbar5.data("plugin_tinyscrollbar")
scrollbar5.update();

创建一个锚定，当单击时将栏滚动到50像素。

var $scrollbar6 = $('#scrollbar6');
$scrollbar6.tinyscrollbar();
var scrollbar6 = $scrollbar6.data("plugin_tinyscrollbar");
$('.scrollbar6button').click(function() {
  scrollbar6.update(50);
  return false;
});

可选参数

• axis = 'y' String optionalVertical or horizontal scroller? ( x || y ).
• wheel = true Boolean optionalEnable or disable the mousewheel.
• wheelSpeed = 40 Boolean optionalHow many pixels must the mouswheel scroll at a time.
• wheelLock = true Boolean optionalLock default window wheel scrolling when there is no more content to scroll.
• touchLock = true Number optionalLock default window touch scrolling when there is no more content to scroll.
• trackSize = false Boolean | Number optionalSet the size of the scrollbar to auto(false) or a fixed number.
• thumbSize = false Boolean | Number optionalSet the size of the thumb to auto(false) or a fixed number
• thumbSizeMin = 20 Boolean optionalMinimum thumb size.

属性

contentPosition	Number	The position of the content relative to the viewport.
contentRatio	Number	The ratio of the content size relative to the viewport size.
contentSize	Number	The height or width of the content.
hasContentToSroll	Boolean	Will be true if there is content to scroll.
options	Object	The options of the carousel extend with the defaults.
thumbPosition	Number	The position of the thumb relative to the track.
thumbSize	Number	The height or width of the thumb.
trackRatio	Number	The size of the track relative to the size of the content.
trackSize	Number	The height or width of the content.
viewportSize	Number	The height or width of the viewport.

方法

update ( scrollTo )

You can use the update method to adjust the scrollbar to new content or to move the scrollbar to a certain point.

• scrollTo Number | String optional
  Number in pixels or the values "relative" or "bottom". If you dont specify a parameter it will default to top

监听事件

move

The move event will trigger when the carousel slides to a new slide.

完整示例

// Initialize a scrollbar like this.
var $box = $('#box');
$box.tinyscrollbar();

// Try this to get access to the actual scrollbar instance.
var box = $box.data("plugin_tinyscrollbar");

// Now you have access to all the methods and properties.
// box.update();
// console.log(box.contentPosition);
// etc..

// You can bind to the move event like this.
$box.bind("move", function(){
  console.log("do something on every move.");
});

相关链接

• 项目地址：https://baijs.com/tinyscrollbar/
• Github 地址：https://github.com/wieringen/tinyscrollbar