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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!