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()               
                

配置参数

全局参数
参数名称 默认值 描述
scrollMinUpdateInterval 25 (ms) 默认情况下,滚动条会每秒更新40次,次数越多,滚动轨道更新越不频繁。最小值为16,表示滚动轨道每秒更新60次。
checkFrequency 1000 (ms) 检测滚动区域内容更新的时间。要禁止检测,将值设置为0。
实例参数
参数名称 默认值 描述
preventParentScroll false 当滚动条到达底部或顶部时防止父容器滚动。在iOS中可以防止页面跳动。
forceScrollbars false 在iOS, Android 和 OSX系统中使用自定义滚动条。
scrollStopDelay 300 (ms) 假定滚动条停止的时间,然后触发scrollstop事件。
maxTrackSize 95 (%) 滚动条轨道的最大尺寸。
minTrackSize 5 (%) 滚动条轨道的最小尺寸。
draggableTracks true 是否允许拖拽滚动条轨道。
autoUpdate true 是否允许滚动条在容器内容更新后自动更新。
classPrefix 'optiscroll-' 自定义class前缀。

例如:

// 改变滚动条的尺寸 - 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属性和一些有用的数据。

事件 触发时间
sizechange 当改变滚动容器的clientWidth/clientHeight,或滚动区域的rollWidth/scrollHeight时触发。
scrollstart 用户开始滚动时触发。
scrollstop 当停止滚动时触发。
scrollreachedge 当滚动到任何一条边部时触发。
scrollreachtop 滚动到顶部时触发。
scrollreachbottom 滚动到底部时触发。
scrollreachleft 滚动到左侧时触发。
scrollreachright 滚动到右侧时触发。

Detail对象属性:

名称 描述
scrollbar{V/H}.percent 滚动的百分比,0-100之间。
scrollbar{V/H}.position 滚动条的位置距离左上角的比例,0-1之间。
scrollbar{V/H}.size 滚动条的宽高比,0-1之间。
scrollTop 滚动条距离顶部的距离,单位像素。
scrollLeft 滚动条距离底部的距离,单位像素。
scrollBottom 滚动条距离左侧的距离,单位像素。
scrollRight 滚动条距离右侧的距离,单位像素。
scrollWidth 滚动条的宽度,单位像素。
scrollHeight 滚动条的高度,单位像素。
clientWidth 滚动元素的宽度,单位像素。
clientHeight 滚动元素的高度,单位像素。

例如:

// 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