漂亮的滚动条js插件minibar.js

漂亮的滚动条js插件minibar.js源码下载

看看谁在用

查看文件结构

文件大小:0.01M

资源分类: 插件-其它前端代码

更新时间: 2021-02-25

minibar.js是一个纯JavaScript类库,允许您创建自定义滚动条使用自己的CSS类。同时支持滚动容器和整个网页。也可以用作你向下滚动网页内容的进度。

初始化容器
new MiniBar('#myContent');
CSS滚动条样式
.mb-track { border-radius: 5px; }

.mb-bar { background-color: #4C9689; }

body > .mb-container > .mb-track {
  background-color: #110c10;
  border-radius: 5px;
}
滚动条配置参数
new MiniBar('#myContent',{

    // or progress
    barType: "default",

    // min size
    minBarSize: 10,

    // always shows scrollbars
    alwaysShowBars: false,

    // enables horizontal/vertical scrollbars
    scrollX: true,
    scrollY: true,

    // shows nav buttons
    navButtons: false,

    // scroll amount in pixels
    scrollAmount: 10,
    
    // MutationObserver API
    mutationObserver: {
      attributes: false,
      childList: true,
      subtree: true
    },

    // default classes
    classes: {
      container: "mb-container",
      content: "mb-content",
      track: "mb-track",
      bar: "mb-bar",
      visible: "mb-visible",
      progress: "mb-progress",
      hover: "mb-hover",
      scrolling: "mb-scrolling",
      textarea: "mb-textarea",
      wrapper: "mb-wrapper",
      nav: "mb-nav",
      btn: "mb-button",
      btns: "mb-buttons",
      increase: "mb-increase",
      decrease: "mb-decrease",
      item: "mb-item",
      itemVisible: "mb-item-visible",
      itemPartial: "mb-item-partial",
      itemHidden: "mb-item-hidden"
    }

});
回调方法
new MiniBar('#myContent',{
    onInit: function() {},
    onUpdate: function() {},
    onStart: function() {},
    onScroll: function() {},
    onEnd: function() {},
});
API方法
// scrolls to a specific point
instance.scrollTo(position, axis);

// scrolls the content by a certain amount
instance.scrollBy(amount, axis, duration, easing);

// scroll to top
instance.scrollToTop();

// scroll to bottom
instance.scrollToBottom();

// recalculates scollbar sizes and positions
instance.update();

// destroys the scrollbar
instance.destroy();

漂亮的滚动条js插件minibar.js

正在加载文件目录...

也许你还喜欢

  1. jquery.nicescroll美化滚动条使用例子
  2. 内容区域滚动条插件 SimpleScrollbar.js
  3. jQuery.nicescroll美化滚动条插件
  4. jquery+bootstrap表格Table头部固定插件
  5. jquery左侧折叠菜单控制右侧内容区域
  6. 电子表格插件webdatarocks.js
大气的物流货运行业网站HTML5模板
  • 标签查找|关于我们|用户协议|格式化工具|bootstrapmb.com 版权所有 苏ICP备17077179号-2