当前位置：首页 > article >正文

overlayscrollbars使用

article 2024/9/30 9:01:26

官网

https://github.com/KingSora/OverlayScrollbars

使用

<link href="https://cdn.bootcdn.net/ajax/libs/overlayscrollbars/2.10.0/styles/overlayscrollbars.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/overlayscrollbars/2.10.0/browser/overlayscrollbars.browser.es6.js"></script>

案例

快速入门

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/overlayscrollbars/2.10.0/styles/overlayscrollbars.css"
        rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/overlayscrollbars/2.10.0/browser/overlayscrollbars.browser.es6.js">
    </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #test {
            width: 100%;
            height: 100%;
        }

        #test .item {
            height: 100px;
            width: 100%;
            border-bottom: 1px solid #ccc;
            text-align: center;
            font-size: 40px;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div id="test"></div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var os = OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector("body"), {});
        });

        $(function () {
            var htmlData = '';

            for (let index = 1; index <= 100; index++) {
                htmlData += '<div class="item">' + index + '</div>'
            }
            $("#test").html(htmlData)
        })
    </script>
</body>

</html>

在这里插入图片描述

自动隐藏滚动条

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/overlayscrollbars/2.10.0/styles/overlayscrollbars.css"
        rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/overlayscrollbars/2.10.0/browser/overlayscrollbars.browser.es6.js">
    </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #test {
            width: 100%;
            height: 100%;
        }

        #test .item {
            height: 100px;
            width: 100%;
            border-bottom: 1px solid #ccc;
            text-align: center;
            font-size: 40px;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div id="test"></div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var os = OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector("body"), {
                scrollbars: {
                    autoHide: 'leave',
                    autoHideDelay: 1300,
                },
            });
            OverlayScrollbarsGlobal.OverlayScrollbars.plugin([
                OverlayScrollbarsGlobal.SizeObserverPlugin,
                OverlayScrollbarsGlobal.ClickScrollPlugin,
                OverlayScrollbarsGlobal.ScrollbarsHidingPlugin,
            ])
        });

        $(function () {
            var htmlData = '';

            for (let index = 1; index <= 100; index++) {
                htmlData += '<div class="item">' + index + '</div>'
            }
            $("#test").html(htmlData)
        })
    </script>
</body>

</html>

在这里插入图片描述
滚动的时候就会出现

详细内容

参考github整理，有需要的可以看

<!DOCTYPE html>
<html data-overlayscrollbars-initialize lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link href="https://cdn.bootcdn.net/ajax/libs/overlayscrollbars/2.10.0/styles/overlayscrollbars.css"
        rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/overlayscrollbars/2.10.0/browser/overlayscrollbars.browser.es6.js">
    </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> -->
    <link href="css/overlayscrollbars.css" rel="stylesheet" />
    <script src="js/jquery.js"></script>
    <script src="js/overlayscrollbars.browser.es5.js"></script>

    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #test {
            width: 100%;
            height: 100%;
        }

        #test .item {
            height: 100px;
            width: 100%;
            border-bottom: 1px solid #ccc;
            text-align: center;
            font-size: 40px;
            line-height: 100px;
        }

        #fixed {
            top: 0;
            right: 10px;
            position: fixed;
            width: 5px;
            height: 100%;
            background: red;
        }
    </style>
</head>
<!-- 
    初始化OverlaySollbars时，创建所有元素并将其附加到DOM需要几毫秒的时间。在此期间，本机滚动条仍然可见，并将在初始化完成后关闭。这被视为闪烁。
    要修复此行为，请将数据覆盖滚动条初始化(data-overlayscrollbars-initialize)属性应用于目标元素（以及初始化正文元素的滚动条时的html元素）。 
-->

<body data-overlayscrollbars-initialize>
    <div id="test">
    </div>
    <div id="fixed"></div>
    <script>
        //快速上手
        // document.addEventListener('DOMContentLoaded', function () {
        //     var os = OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector("body"), {});
        // });
        //使用对象的方式初始化
        //OverlayScrollbars(document.querySelector('body'), {});
        //OverlayScrollbarsGlobal.OverlayScrollbars({ target: document.querySelector('body') }, {});
        //使用对象初始化时，可以指定库如何处理生成的元素。例如，您可以将现有元素指定为“viewport”元素。然后库不会生成它，而是使用指定的元素：
        // OverlayScrollbarsGlobal.OverlayScrollbars({
        //     target: document.querySelector('body'),
        //     elements: {
        //         viewport: document.querySelector('body'),
        //     },
        // }, {});
        //如果你有一个固定的DOM结构，不想让OverlaySollbars创建自己的元素，这非常有用。当您希望另一个库使用OverlaySollbars时，这些情况非常常见。

        //您还可以决定滚动条应应用于哪个元素：
        // OverlayScrollbarsGlobal.OverlayScrollbars({
        //     target: document.querySelector('body'),
        //     scrollbars: {
        //         slot: document.querySelector('#fixed'),
        //     },
        // }, {});
        //最后但同样重要的是，您可以决定何时取消初始化：
        // OverlayScrollbarsGlobal.OverlayScrollbars({
        //     target: document.querySelector('body'),
        //     cancel: {
        //         nativeScrollbarsOverlaid: true,
        //         body: null,
        //     }
        // }, {});
        //在上面的示例中，如果覆盖了本机滚动条，或者如果您的目标是body元素，
        //并且插件已确定初始化body元素会干扰windows.scrollTo等本机功能，则初始化将中止
        //配置
        //您可以使用一组初始选项初始化OverlaySollbars，这些选项可以随时使用options方法进行更改：
        // document.addEventListener('DOMContentLoaded', function () {
        //     var os = OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector("body"), {
        //         overflow: {
        //             //'hidden', 'scroll', 'visible', 'visible-hidden' and 'visible-scroll'.
        //             y: 'hidden',//visible滚动条不可见，可以滚动 scroll滚动条一直可见，可以滚动 hidden不允许滚动
        //         },
        //     });
        // });
        //默认配置如下
        // const defaultOptions = {
        //     paddingAbsolute: false,//表示内容的 padding 是否应为绝对值。boolean
        //     showNativeOverlaidScrollbars: false,//表示本机叠加滚动条是否可见。boolean
        //     update: {
        //         elementEvents: [['img', 'load']],//元组数组。 元组中的第一个值是选择器，第二个值是事件名称。 如果具有指定选择器的任何元素发出任何指定事件，插件将更新自身。 默认值可解释为 "如果任何 img 元素发出加载事件，插件将自行更新"。
        //         debounce: [0, 33],//如果超时时间为 0，则将使用 requestAnimationFrame 代替 setTimeout 来进行去抖。
        //         //取消跟踪内容变化的 MutationObserver。 如果传递的是一个元组，第一个值是超时时间，第二个值是最大等待时间。 如果只有一个数字，则视为超时，没有最大等待时间。 如果为空，则不存在去抖动。 有助于微调性能。
        //         attributes: null,//即使该选项为空，MutationObserver 也会始终观察一个基本属性数组。
        //         ignoreMutation: null,//一个接收 MutationRecord 作为参数的函数。 如果函数返回一个真值，突变将被忽略，插件也不会更新。 这对微调性能非常有用。
        //     },
        //     overflow: {
        //     //'hidden'、'scroll'、'visible'、'visible-hidden'、'visible-scroll'.
        //         x: 'scroll',//水平 (x) 轴的溢出行为。
        //         y: 'scroll',//垂直（Y）轴的溢出行为。
        //     },
        //     scrollbars: {
        //         theme: 'os-theme-dark',//将指定的主题（类名）应用于滚动条。
        //         visibility: 'auto',//有效值'visible', 'hidden', and 'auto'.如果滚动条的滚动轴可以滚动溢出，则该滚动条的可见性。 (只有当溢出行为设置为 "scroll "或 "visible-scroll "时，轴的可滚动溢出才有可能）。
        //         autoHide: 'never',//'never', 'scroll', 'leave', 'move'.指定是否在用户执行特定操作后自动隐藏可见滚动条。
        //         autoHideDelay: 1300,//自动隐藏滚动条前的延迟时间（毫秒）。
        //         autoHideSuspend: false,//暂停自动隐藏功能，直到执行了第一次滚动交互。 出于向后兼容性的原因，该选项的默认值为假，但为了更好的可访问性，建议使用 "true"。
        //         dragScroll: true,//表示是否可以拖动滚动条手柄进行滚动。
        //         clickScroll: false,//如果设置为 true，则需要使用 ClickScrollPlugin。表示是否可以点击滚动条轨道进行滚动。
        //         pointers: ['mouse', 'touch', 'pen'],插件应响应的指针类型。
        //     },
        // };
        //事件
        //您可以使用一组初始事件对 OverlayScrollbars 进行初始化，这些事件可以随时使用 on 和 off 方法进行管理：
        // OverlayScrollbars(document.querySelector('#myElement'), {}, {
        //     updated(osInstance, onUpdatedArgs) {
        //         // ...
        //     }
        // });
        //每个事件的第一个参数都是事件派发的实例。 总是这样
        //在所有生成的元素、观察者和事件都附加到 DOM 后发送。
        //initialized 在所有生成的元素、观察者和事件都附加到 DOM 后发送。
        //updated在实例更新后发送。如果触发了更新，但没有任何变化，则不会派发事件。
        //destroyed 在所有生成的元素、观察者和事件从 DOM 中移除后派发。
        //scroll 通过滚动视口调度。
        // const scrollBar = OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector("body"), {}, {
        //     initialized: (instance) => {
        //         console.log('加载完成');
        //         console.log(instance);

        //     },
        //     updated: (instance, canceled) => {
        //         console.log('更新了');
        //         console.log(instance);
        //         console.log(canceled);
        //     },
        //     destroyed: (instance, canceled) => {
        //         console.log('被销毁了');
        //         console.log(instance);
        //         console.log(canceled);
        //     },
        //     scroll: (instance, event) => {
        //         console.log('滚动条');
        //         console.log(instance);
        //         console.log(event);
        //     },
        // });

        //静态方法
        //valid(osInstance:any): boolean 检查传递的值是否为有效且未被销毁的overlayrollings实例
        //env(): Environment 获取环境
        //nonce(newNonce): void  设置内联样式的nonce属性。
        //plugin(plugin): object | undefined 添加插件
        //plugin(plugins): (object | void)[] 添加一些插件 描述插件静态模块实例的数组，如果找不到实例，则为undefined。
        //样式
        //OverlayScrollbars有两个主题，分别是os-theme-dark和os-theme-light。您可以使用滚动条.theme选项更改主题。
        //自定义主题可以通过多种方式完成。最简单、最快的方法是使用预定义的CSS自定义属性集，即CSS变量。如果这还不够，您可以添加自定义类名或向现有类名添加自定义样式。
        //OverlaySollbars提供了一组CSS自定义属性，使滚动条样式设置变得简单快捷：
        /*
        .os-scrollbar {
            // 滚动条的大小
            --os-size: 0;
            // 滚动条的垂直轴填充（水平：padding-y，垂直：padding-x）
            --os-padding-perpendicular: 0;
            // 滚动条的轴填充（水平：padding-x，垂直：padding-y）
            --os-padding-axis: 0;
            // 滚动条轨迹的边界半径
            --os-track-border-radius: 0;
            // 滚动条轨迹的背景
            --os-track-bg: none;
            // 滚动条轨迹的：hover背景
            --os-track-bg-hover: none;
            //滚动条轨道的活动背景
            --os-track-bg-active: none;
            // 滚动条轨道的边界
            --os-track-border: none;
            // 滚动条轨迹的：hover背景
            --os-track-border-hover: none;
            //滚动条轨道的活动背景
            --os-track-border-active: none;
            // 滚动条控制柄的边界半径
            --os-handle-border-radius: 0;
            // 滚动条手柄的背景
            --os-handle-bg: none;
            // 滚动条手柄的：hover背景
            --os-handle-bg-hover: none;
            // 滚动条手柄的：活动背景
            --os-handle-bg-active: none;
            // 滚动条手柄的边框
            --os-handle-border: none;
            //滚动条手柄的：hover边框
            --os-handle-border-hover: none;
            // 滚动条手柄的：活动边框
            --os-handle-border-active: none;
            //滚动条句柄的最小大小
            --os-handle-min-size: 33px;
            // 滚动条句柄的最大大小
            --os-handle-max-size: none;
            // 滚动条控制柄的垂直轴大小（水平：高度，垂直：宽度）
            --os-handle-perpendicular-size: 100%;
            // 滚动条控制柄的：悬停轴垂直大小（水平：高度，垂直：宽度）
            --os-handle-perpendicular-size-hover: 100%;
            // 滚动条控制柄的：活动轴垂直大小（水平：高度，垂直：宽度）
            --os-handle-perpendicular-size-active: 100%;
            // 增加滚动条手柄的交互区域。
            --os-handle-interactive-area-offset: 0;
        }
        */
        //您可以同时更改两个滚动条的属性，也可以更改每个滚动条轴的属性。在下面的示例中，我选择了“os theme custom”作为主题名称：
        /*
        // 水平和垂直滚动条为10px
         .os-theme-custom {
             --os-size: 10px;
         }
 
         // 水平滚动条为10px
         .os-theme-custom.os-scrollbar-horizontal {
             --os-size: 10px;
         }
         // 垂直滚动条为20px
         .os-theme-custom.os-scrollbar-vertical {
             --os-size: 20px;
         }
        */
        //插件
        //任何不被认为是核心功能或旧浏览器兼容性的东西都会通过插件暴露出来。之所以这样做，是因为所有未使用的插件在树摇动过程中都会被省略，并且不会最终出现在您的最终捆绑包中。
        //OverlaySollbars附带了以下插件：
        //ScrollbarsHidingPlugin：不支持原生滚动条样式的旧浏览器需要它。您可以在此处找到需要此插件的浏览器列表（请注意，尽管iOS Safari>=14被标记为不受支持，但您只需要iOS<7.1的此插件）。
        //SizeObserverPlugin：不支持ResizeObserver api的旧浏览器需要此插件。您可以在此处找到需要此插件的浏览器列表
        //ClickScrollPlugin：如果你想使用滚动条选项：{clickScroll:true}。
        /*
        import { 
            OverlayScrollbars, 
            ScrollbarsHidingPlugin, 
            SizeObserverPlugin, 
            ClickScrollPlugin 
        } from 'overlayscrollbars';
        
        // Single plugin
        OverlayScrollbars.plugin(ScrollbarsHidingPlugin);
        
        // Multiple plugins
        OverlayScrollbars.plugin([SizeObserverPlugin, ClickScrollPlugin]);
        */
        document.addEventListener('DOMContentLoaded', function () {
            var os = OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector("body"), {
                scrollbars: {
                    autoHide: 'leave',
                    autoHideDelay: 1300,
                },
            });
            OverlayScrollbarsGlobal.OverlayScrollbars.plugin([
                OverlayScrollbarsGlobal.SizeObserverPlugin,
                OverlayScrollbarsGlobal.ClickScrollPlugin,
                OverlayScrollbarsGlobal.ScrollbarsHidingPlugin,
            ])
        });
        $(function () {
            var htmlData = '';

            for (let index = 1; index <= 100; index++) {
                htmlData += '<div class="item">' + index + '</div>'
            }
            $("#test").html(htmlData)
        })
    </script>
</body>

</html>