Optiscroll-轻量级纯Js滚动条美化插件

Optiscroll是一款轻量级纯Js滚动条美化插件。该滚动条美化插件可以隐藏原生的滚动条，并生成用户自定义样式的滚动条。它的特点还有：

• 轻量级，没有任何依赖，压缩后的版本仅9kb。
• 性能高度优化。
• 支持水平和垂直滚动条。
• 支持嵌套滚动条。
• 支持自定义事件。
• 可以制作scrollTo和scrollIntoView动画。
• 滚动区域内容改变时自动更新滚动条。
• 修复iOS页面弹跳问题。
• 可以工作在包括IE9+的所有现代浏览器中。
• 可以作为jQuery插件来使用。

安装

可以通过bower来安装该滚动条插件。

bower install optiscroll --save                  
                

使用方法

使用该滚动条插件需要在页面中引入optiscroll.css，optiscroll.js，或者作为jQuery插件来使用，引入jquery和jquery.optiscroll.js文件。

<link rel="stylesheet" href="optiscroll.css">
<!-- js版本 -->
<script src="optiscroll.js"></script>
<!-- 或者作为jQuery插件 -->
<script src="jquery.optiscroll.js"></script>                  
                

HTML结构

为你需要美化滚动条的容器添加.optiscroll class。

<div id="scroll" class="optiscroll">
    <!-- scrollable area, an additional wrapper will be created -->
</div>     
                

初始化插件

可以通过下面的方法来初始化该滚动条插件。

// 纯js
var element = document.querySelector('#scroll')
var myOptiscrollInstance = new Optiscroll(element);

// jQuery插件
$('#scroll').optiscroll()               
                

配置参数

全局参数

实例参数

例如：

// 改变滚动条的尺寸 - js版本
var myOptiscrollInstance = new Optiscroll(element, { maxTrackSize: 50, minTrackSize: 20 });

// 强制在移动设备上使用自定义滚动条 - jQuery插件
$('#scroll').optiscroll({ forceScrollbars: true });                  
                

方法

• scrollTo ( destX, destY [, duration] )：滚动到指定位置，并带有平滑过渡的动画效果。如果你只需要在一个轴上滚动，另外一个轴设置为false。默认情况下动画时间根据距离来计算，你也可以设置滚动的动画时间。
  • destX：允许值：number (px), left, right, false。
  • destY：允许值：number (px), top, bottom, false。
  • duration：允许值：number (ms), auto。

  例如：

  // 垂直滚动500像素
  myOptiscrollInstance.scrollTo(false, 500);
  
  /* The jQuery plugin allows you to call a method in two ways */
  
  // 100毫秒时间内水平滚动到右边
  $('#scroll').data('optiscroll').scrollTo('right', false, 100);
  
  //水平滚动500像素，垂直滚动到底部
  $('#scroll').optiscroll('scrollTo', 500, 'bottom', 'auto');
  

• scrollIntoView (elem [, duration, delta])：在滚动区域视图内进行滚动。对齐方式为最近的边。默认情况下动画时间根据距离来计算。delta是到边部的可选距离，单位像素。每条边的距离都可以定义。
  • element：允许值：DOM节点, jQuery元素, 字符串 (选择器)。
  • duration：允许值：number (ms), auto。
  • delta：允许值：number (px), object with top, left, right, bottom numbers。

  例如：

  // 在ID为anchor-1的容器中滚动
  myOptiscrollInstance.scrollIntoView('#anchor-1');
  
  /* The jQuery plugin allows you to call a method in two ways */
  
  // 在容器中滚动指定的jquery元素，时间500毫秒，距离为到距离边部20像素
  var $el = $('.my-element').last();
  $('#scroll').data('optiscroll').scrollIntoView($el, 500, 20);
  
  // 在容器中滚动指定的jquery元素，距离为距底部20像素，距右侧30像素
  $('#scroll').optiscroll('scrollIntoView', $el, 'auto', { bottom: 20, right: 30 });
  

• update ()：手动更新滚动条。
• destroy ()：销毁滚动条插件。

事件

每一个滚动条实例在和用户交互时都会触发一些事件。每一个事件都包含一个detail属性和一些有用的数据。

Detail对象属性：

例如：

// plain JS listener
document.querySelector('#scroll').addEventListener('scrollreachtop', function (ev) {
    console.log(ev.type) // outputs 'scrollreachtop'
    console.log(ev.detail.scrollTop) // outputs scroll distance from top
    console.log(ev.detail.scrollbarV.percent) // outputs vertical scrolled %
});

// jQuery listener
$('#scroll').on('scrollstop', function (ev) {
    console.log(ev.type) // outputs 'scrollstop'
    console.log(ev.detail.scrollBottom) // outputs scroll distance from bottom
    console.log(ev.detail.scrollbarH.percent) // outputs horizontal scrolled %
});                  
                

Optiscroll滚动条美化插件的github地址为：https://github.com/wilsonfletcher/Optiscroll