jQuery OverlayScrollbars插件提供了一种简单的方法，可以在任何可滚动元素上创建可自定义、可主题化的覆盖滚动条，同时保留本地滚动功能。

香草JS版本的DOC在这里可用。

特征：

• 触摸已启用。
• 支持RTL。
• CSS3动画。
• 跨浏览器。
• 高性能。

基本用法：

1.在网页的首页部分包含您选择的主样式表和主题CSS。

<!-- Main -->
<link href="css/OverlayScrollbars.css" rel="stylesheet">

<!-- 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">

2.包括jQuery JavaScript库和jquery.overlay滚动条.js页面上的脚本。

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="js/jquery.overlayScrollbars.js"></script>

3.调用目标可滚动元素上的函数，并指定要使用的主题Class。可用主题：

• os主题深色：内置
• os主题灯：内置
• os主题最小深色
• os主题最小灯光
• os主题薄深色
• os主题微光
• os主题深色
• os主题粗光
• os主题圆形深色
• os主题圆形灯
• os主题块深色
• os主题块灯

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

4.更多用于自定义滚动条的配置选项。

$('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,  

  // Control on which elements / selectors OverlayScrollbars shall update automatically after the emit of a load event.
  // You can set it to null to disable this auto updating entierly or add your own selectors to update only on special img elements or on for example loaded iframes. 
  updateOnLoad: ['img'],    

  // 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
    snapHandle: true     //true || false
  },

  // Defines special behavior of textarea elements.
  textarea : {
    dynWidth : false,  //true || false
    dynHeight : false,  //true || false
    inheritedAttrs : inheritedAttrsTemplate //string || array || null
  }
  
}); 

5.回调函数。

$('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
  }
  
}); 

6.API方法。

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

// checks whether a passed object is a non-destroyed OverlayScrollbars instance
instance.valid()

更新日志：

v2.1.0版本（2023-02-06）

• 重大更新。单击此处查看详细信息。

v1.13.0 (2020-08-03)

• 如果拖动滚动条句柄，则单击事件不会传播到主体，以更接近本机行为。
• .os padding元素现在具有默认的z索引。
• 点击滚动量和速度现在会根据滚动条手柄的大小进行调整，以更准确。
• RTL（从右到左）样式将不再应用于body元素，以更接近本地行为。

v1.11.0 (2020-04-06)

• 如果宽度不固定，“最大内容”现在用于检测可能的大小。（仅当浏览器支持时，否则使用旧算法）
• 更新了所有包装器版本，以更好地支持前端框架
• 从主机元素中删除了无用的触摸事件
• 一个名为“updateOnLoad”的新选项，您可以使用该选项控制哪些元素/选择器OverlayScrollbars将在发出加载事件后自动更新。默认情况下，该值设置为[“img”]，因此插件将在任何img发出加载事件后更新。您可以将其设置为null以完全禁用此自动更新，或者添加自己的选择器以仅在特殊的img元素或例如加载的iframe上进行更新
• 错误修复程序

v1.11.0 (2020-03-01)

• 更改了RTL行为检测，以支持Chromium web互操作性工作
• 实现了一种直观地设置viewport元素的tabindex属性的方法
• 更改了restrictedMeasureing解决方法（现在通过CSS工作）
• 删除了不必要的CSS
• 如果支持ResizeObserver，它现在可以再次检测Chrome中填充的更改。

v1.10.3 (2020-02-03)

• 已修复：引用错误：未定义previousOverflow
• 使用滚动方法更改位置后，可以通过滚动方法获取的滚动信息的缓存将立即更新。

v1.9.0 (2019-07-27)

• 修正了更改选项后出现意外滚动跳跃的错误。
• 修正了一个错误，即如果宽度是自动的，则没有检测到最小宽度变化
• 修正了一个错误，即更新函数没有正确更新文本区域，只有它的值发生了变化，因此它的大小也发生了变化。
• 一个新的全局方法OverlayScrollbars.valid，用于检查传递的对象是否为未销毁的OverlayScrllbars实例。

v1.8.0 (2019-07-09)

• getState（）方法返回的对象现在包含一个名为destroyed的新属性，该属性表示实例已被销毁。
• 更改了被动事件侦听器的管理：调用prefentDefault（）的触摸事件现在添加了passive:false，所有其他应该是被动的和不调用prefentDefault（）的事件都添加了passive：true
• 为框架包装器（如react、vue和angular）做准备：如果至少有一个选项被真正更改，那么option（）方法现在只会调用update（）方法。
• 修复了错误。
• 内部update（）方法的清理处理。

v1.7.3 (2019-06-24)

• 错误修复。

v1.7.0（2019年4月19日）

• 添加了一个新选项scrollbars.snapHandle，它可以帮助您在使用CSS Snap Scrolling时控制滚动条句柄的行为。
• scroll（）方法返回的对象现在有一个名为snappedHandleOffset的新属性。
• CSS Snap Scrolling现在有了更深层次的支持：手柄拖动现在是平滑的（由新选项scrollbars.snapHandle控制），如果中途放手，则向后跳现在有了过渡。
• 如果你设置了一个句柄的最大大小，并且溢出太小了，那么如果中途放弃，那么返回的跳转现在就有了过渡。
• 如果拖动控制柄，下一个计算的滚动位置现在是圆形的，而不是落地的，这会带来更好的用户体验。
• 点击滚动现在更精确了。
• 错误已修复。

2019-01-17

• v1.6.2版本

预览截图

高度可定制 自定义叠加滚动条插件 jQuery