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

overlayscrollbars使用

news 来源：原创 2024/9/27 21:13:42

官网

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 pluginOverlayScrollbars.plugin(ScrollbarsHidingPlugin);// Multiple pluginsOverlayScrollbars.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>

参考

https://www.showapi.com/news/article/66b7b6884ddd79f11a0a79aa

相关文章：

  • 基于大数据技术的颈椎病预防交流与数据分析及可视化系统
  • 易燃气体检测系统源码分享
  • 统信服务器操作系统【qcow2 镜像空间扩容】方案
  • 【速成Redis】03 Redis 五大高级数据结构介绍及其常用命令 | 消息队列、地理空间、HyperLogLog、BitMap、BitField
  • CVE-2024-1112 Resource Hacker 缓冲区溢出分析
  • VBA技术资料MF205：移动工作表时名称重复的处理
  • 吹爆这份Stable diffusion提示词攻略！
  • python爬虫：将知乎专栏文章转为pdf
  • 玩美移动AI护肤品推荐解决方案，全新升级 为护肤品牌及其零售商，提供自动匹配推荐产品功能
  • 教师信息素养测评：多维视角下的全面审视
  • Splashtop 加入 Microsoft 智能安全协会
  • A 股疯了？交易所系统都被买崩了！
  • IT行业的现状与未来发展趋势
  • 高通平台修改Android 10源码获取root权限
  • Vmware VC登录报错：Vmware报错 HTTP状态 500 - 内部服务器错误
  • HTTP传输编码增加了传输量，只为解决这一个问题 | 实用 HTTP
  • React-redux的原理以及使用
  • scala基础语法(二)
  • Vue源码解析（二）Vue的双向绑定讲解及实现
  • 从零开始的webpack生活-0x009：FilesLoader装载文件
  • 分布式熔断降级平台aegis
  • 基于Mobx的多页面小程序的全局共享状态管理实践
  • 适配mpvue平台的的微信小程序日历组件mpvue-calendar
  • HanLP分词命名实体提取详解
  • k8s使用glusterfs实现动态持久化存储
  • 不要一棍子打翻所有黑盒模型，其实可以让它们发挥作用 ...
  • 从如何停掉 Promise 链说起
  • ​HTTP与HTTPS：网络通信的安全卫士
  • # 安徽锐锋科技IDMS系统简介
  • ## 临床数据 两两比较 加显著性boxplot加显著性
  • #微信小程序：微信小程序常见的配置传旨
  • (2020)Java后端开发----（面试题和笔试题）
  • （4）STL算法之比较
  • (42)STM32——LCD显示屏实验笔记
  • （第27天）Oracle 数据泵转换分区表
  • （二）pulsar安装在独立的docker中，python测试
  • （三）Hyperledger Fabric 1.1安装部署-chaincode测试
  • (四) 虚拟摄像头vivi体验
  • （一）python发送HTTP 请求的两种方式(get和post )
  • .Net 垃圾回收机制原理（二）
  • .NET 药厂业务系统 CPU爆高分析
  • @column注解_MyBatis注解开发 -MyBatis(15)
  • @RestController注解的使用
  • @SuppressLint(NewApi）和@TargetApi()的区别
  • []AT 指令 收发短信和GPRS上网 SIM508/548
  • [20180312]进程管理其中的SQL Server进程占用内存远远大于SQL server内部统计出来的内存...
  • [4]CUDA中的向量计算与并行通信模式
  • [AI Google] Ask Photos: 使用Gemini搜索照片的新方法
  • [Android 13]Input系列--获取触摸窗口
  • [Assignment] C++1
  • [AutoSar]BSW_Com02 PDU详解
  • [C#]C# OpenVINO部署yolov8图像分类模型
  • [C#]winform部署yolov5-onnx模型
  • [C++]高精度 bign (重载运算符版本)
  • [CISCN 2019华东南]Web11