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

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

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

在线预览    下载

 使用方法

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

< link rel="stylesheet" href="optiscroll.css">

< script src="optiscroll.js">

< script src="jquery.optiscroll.js">                  

 HTML结构

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

< div id="scroll" class="optiscroll">
    
     

 初始化插件

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

// 纯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 %
});