x-scrollbar
版本: v3.0.0 作者: 清晨的阳光(QQ:765550360) 许可: MIT 源码: https://gitee.com/xujz520/x-scrollbar ## 概述 这是一个自定义滚动条插件. 在现代前端环境下为什么还需要它, 它有什么特点: * 滚动条可以半透明的悬浮于内容上方(类似于移动端). * 可以设置仅水平滚动(拨动鼠标滚轮将作用于X轴). ### 支持环境 | ![](./assets/edge.png) | ![](./assets/chrome.png) | ![](./assets/firefox.png) | ![](./assets/safari.png) | | ---- | ---- | ---- | ---- | | Edge | Chrome | Firefox | Safari | > 若要支持IE请使用2.x版本 ## 安装 ### 直接在浏览器中使用 ```html
``` ```html ``` CDN ```html
``` ```html ``` ### 通过npm安装 ```bash npm i x-scrollbar --save ``` > 需要自行引入 ` node_modules/x-scrollbar/xscrollbar.css ` 样式 ```js import XScrollbar from 'x-scrollbar'; ``` ## 基础示例 ```html
``` ### 常用API ```js let xscrollbar = new XScrollbar(document.querySelector('#div1')); // 读取 xscrollbar.$container.scrollLeft xscrollbar.$container.scrollTop // 设置 xscrollbar.$container.scrollLeft = 100 xscrollbar.$container.scrollTop = 100 // 监听滚动 xscrollbar.$container.addEventListener('scroll', function() { //... }) ```
## 样式
## API ### 构造函数 ```js new XScrollbar(dom: HTMLElement, options?: object) ``` ### options | 选项 | 默认值 | 描述 | | --------------- | ------ | ---------------------------------------------------------------------- | | autoUpdate | true | 响应容器和内容大小改变(自动更新滚动条) | | preventDefault | true | 阻止向上传递滚动事件| | onlyHorizontal | false | 仅水平滚动(拨动鼠标滚轮时将作用于X轴) | | autoHide | true | 自动隐藏 | | thumbSize | 5px | 滑块大小(激活后是原来的两倍) | | trackBackground | #ddd | 轨道背景 | | thumbBackground | #5f5f5f | 滑块背景 | | thumbRadius | 5px | 滑块圆角大小 | ### 实例成员 * **$container** 滚动容器, 用于读写 `scrollLeft/scrollTop` 或用于添加 `scroll` 事件 * **update()** 更新滚动滚动条的状态(容器或内容大小发生改变), 在 `options.autoUpdate = false` 的情况下使用 ## 鼓励
如果该插件对您有帮助, 就请把你的小星星(Star)送给我吧^_^ , 您的鼓励是我最大的动力!
初始化
[ + ] 添加一行
[ - ] 删除一行
[ + ] 添加一列
[ - ] 删除一列
设置 scrollLeft
设置 scrollTop
红色:
绿色:
蓝色:
轨道透明 & 直角:
自动隐藏滚动条(默认):
仅水平滚动(拨动鼠标滚轮将作用于X轴):
1-1
1-2
1-3
1-4
2-1
2-2
3-3
4-4