兼容ie8的jquery滚动条美化插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

OverlayScrollbars是一款兼容ie8的jquery滚动条美化插件。该jquery滚动条美化插件提供了一种简单的方式来对页面或某个元素的滚动条进行美化，提供了12种主题效果。它的特点还有：

兼容IE8浏览器（IE8+, Safari6+, Firefox, Opera, Chrome 以及 Edge）。
包含jquery插件和纯js两个版本。
支持移动手机的触摸事件。
支持文本域Textarea。
支持文本方向RTL。

使用方法

在页面中引入OverlayScrollbars.js和OverlayScrollbars.css文件。

<link href="css/OverlayScrollbars.css" rel="stylesheet" type="text/css">
<script src="js/OverlayScrollbars.js"></script>

如果使用jquery版本，则要移入jquery版本的js文件。

<link href="css/OverlayScrollbars.css" rel="stylesheet" type="text/css">
<script src="js/jquery.overlayScrollbars.min.js"></script>

另外，如果需要使用默认主题值为的其它滚动条主题，需要移入相应的CSS文件。

<!-- round dark -->
<link href="css/os-theme-round-dark.css" rel="stylesheet">

<!-- round light -->
<link href="css/os-theme-round-light.css" rel="stylesheet">

<!-- block dark -->
<link href="css/os-theme-block-dark.css" rel="stylesheet">

<!-- block light -->
<link href="css/os-theme-block-light.css" rel="stylesheet">

<!-- minimal dark -->
<link href="css/os-theme-minimal-dark.css" rel="stylesheet">

<!-- minimal light -->
<link href="css/os-theme-minimal-light.css" rel="stylesheet">

<!-- thick dark -->
<link href="css/os-theme-thick-dark.css" rel="stylesheet">

<!-- thick light -->
<link href="css/os-theme-thick-light.css" rel="stylesheet">

<!-- thin dark -->
<link href="css/os-theme-thin-dark.css" rel="stylesheet">

<!-- thin light -->
<link href="css/os-theme-thin-light.css" rel="stylesheet">

初始化插件

如果需要美化这个页面的滚动条，则可以在<body>元素上调用该插件。

$('body').overlayScrollbars({
  className: "os-theme-dark"
}); 

// js调用方法
//OverlayScrollbars(document.querySelectorAll('body'), { });

配置参数

OverlayScrollbars滚动条美化插件的可用配置参数如下：

$('body').overlayScrollbars({

  // none || both  || horizontal || vertical || n || b || h || v
  resize : 'none',                

  // true || false
  sizeAutoCapable : true,         

  // true || false
  clipAlways : true,              

  // true || false
  normalizeRTL : true,            

  // true || false
  paddingAbsolute : false,        

  // true || false || null
  autoUpdate : null,              

  // number
  autoUpdateInterval : 33,      

  // These options are only respected if the native scrollbars are overlaid.  
  nativeScrollbarsOverlaid : {
    showNativeScrollbars : false,   //true || false
    initialize : true               //true || false
  },

  // Defines how the overflow should be handled for each axis
  overflowBehavior : {

    // visible-hidden  || visible-scroll || hidden || scroll || v-h || v-s || h || s
    x : 'scroll', 

    // visible-hidden  || visible-scroll || hidden || scroll || v-h || v-s || h || s
    y : 'scroll'  
  },

  // Defines the behavior of the custom scrollbars.
  scrollbars : {
    visibility : 'auto',    //visible || hidden || auto || v || h || a
    autoHide : 'never',     //never || scroll || leave || n || s || l
    autoHideDelay : 800,    //number
    dragScrolling : true,   //true || false
    clickScrolling : false, //true || false
    touchSupport : true     //true || false
  },

  // Defines special behavior of textarea elements.
  textarea : {
    dynWidth : false,  //true || false
    dynHeight : false  //true || false
  }
  
});

回调函数

OverlayScrollbars滚动条美化插件的可用回调函数有：

$('body').overlayScrollbars({

  callbacks : {
    onInitialized : null,               //null || function
    onInitializationWithdrawn : null,   //null || function
    onDestroyed : null,                 //null || function
    onScrollStart : null,               //null || function
    onScroll : null,                    //null || function
    onScrollStop: null,                 //null || function
    onOverflowChanged : null,           //null || function
    onOverflowAmountChanged : null,     //null || function
    onDirectionChanged : null,          //null || function
    onContentSizeChanged : null,        //null || function
    onHostSizeChanged : null,           //null || function
    onUpdated : null                    //null || function
  }
  
});

方法

OverlayScrollbars滚动条美化插件的可用方法有：

var instance = $('body').overlayScrollbars({    
    // options here
}); 

// adds new options
instance.options(optionName, optionValue)

// updates scrollbars
instance.update([force])

// puts the instance to sleep
instance.sleep()

// returns the current scroll information.
instance.scroll()

// sets the scroll position.
instance.scroll(coordinates [, duration] [, easing] [, complete])

// stops the current scroll-animation.
instance.scrollStop()

// returns all relevant elements.
instance.getElements()

// returns a object which describes the current state of this instance.
instance.getState()

// removes scrollbars from DOM
instance.destroy()

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