Tiny Scrollbar 基于 jQuery 轻量级的滚动条插件 - 文章教程

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

发布于 2020-07-12 字数 6331 浏览 1511 评论 0

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

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

插件特点

  • 支持 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.");
});

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论