自定义一款浏览器滚动条，区别于市面上嵌套或代理鼠标滚轮的新方案。

提问： 为什么做了一个自定义滚动条，并且没用Vue,react,angular?

回答： 市面上的滚动插件太多，之前写Vue项目的时候用的elementUI中的组件，最近想写一个简单的Vue项目，不想用其他的组件库了，顺手用js写了一个npm的库，dumogu-scrollbar（大小不超过10K），为什么没用框架来写呢，主要是js覆盖面更广，js写的话，其他框架安装了都能用。

提示： 自定义滚动条的功能始终比不上原生的滚动条，优先级 原生滚动条 > css定义滚动条样式 > 自定义滚动条。

优势： dumogu-scrollbar定义的滚动条可挂载在 body 上（因此对原有的滚动容器没有任何影响，也不会对原有滚动容器做任何修改），当然也可以挂载到您指定的元素上（通常为滚动元素的父级元素，采用绝对定位的方式覆盖到滚动元素上），您甚至可以直接引入轨道组件，放在页面的任何地方。更详细的用法请看DEMO。源码。

install

npm install dumogu-scrollbar

怎么去使用它

import { DumoguScrollbar } from 'dumogu-scrollbar';

/** 定义页面级的滚动条 */
const dsInstance = new DumoguScrollbar({
    keepShow: false, // 始终保持显示
    stopClickPropagation: false, // 阻止滚动条点击事件冒泡
});
dsInstance.bind();
dsInstance.mount();

/** 为滚动元素定义滚动条 */
const dsInstance_1 = new DumoguScrollbar({
    keepShow: true,
    stopClickPropagation: true,
});
dsInstance_1.bind(document.querySelector('#ds-2'));
dsInstance_1.mount();

/** 实例上一些其他的方法 */

// 更新样式
dsInstance.update();
// 挂载，可挂载指定元素上
dsInstance.mount();
// 卸载
dsInstance.unmount();
// 销毁
dsInstance.destroy();

使用自定义滚动条的时候请确保元素可滚动，比如设置了css样式 overflow: auto;