最近的一个需求布局大约是就是头部Header,左边sider，右边content.很常见的布局模式。左
边的菜单栏的数据是动态变化。点击展开收缩的模式。也就是说左边是否滚动是根据展开高度决定的，当时心想，这个套路我简直不要太熟悉了。做过太多这种了。overflow:auto;结束战斗，但是事情怎么可能这个简单。很快产品过来了，这么丑的滚动条，不能优化一下么。我陷入了深思。我觉得应该可以，于是开始了百度，看到了perfectscroll，csdn上面爸这个夸得天花乱坠啊。好，就是你了。于是我开始了我的表演，perfectscroll还是一个挺开箱即用，没有什么学习成本的插件。
首先引入
npm install perfect-scrollbar --save //安装
然后在main.js中开始引入。//因为我的项目是ts项目所以我的是main.ts
import "perfect-scrollbar/css/perfect-scrollbar.css";//引入perfect-scrollbar的样式库
import PerfectScrollbar from "perfect-scrollbar";//引入Perfectscrollbar
这个组件的引用十分的简单，基本就是外层给一个高度固定的div，初始化之后，内部元素高于外包就会开始滚动。基本就是上述这样是最简单的模式。我的项目是vue+ts的所以写法稍有不同。
这两种在谷歌上一切良好。但是在火狐下会出现偶发性失灵，主要是体现在获取不到滚动所需的高度，我曾经尝试手动的添加属性使其滚动但是失败了。所以我决定换插件，经过一番百度之后我决定选择vuescroll，有关问题请自行百度，我这边只写我得写法
1.安装
npm install vue-scroll -S
2.在main.ts中引入
import vuescroll from 'vuescroll';
Vue.use(vueScroll);
//配置如下Vue.prototype.$vuescrollConfig = { vuescroll: { mode: 'native',//选择一个模式, native 或者 slide(pc&app) sizeStrategy: 'percent',//如果父容器不是固定高度，请设置为 number , 否则保持默认的percent即可 detectResize: true//是否检测内容尺寸发生变化 }, scrollPanel: { initialScrollY: false,//只要组件mounted之后自动滚动的距离。 例如 100 or 10% initialScrollX: false, scrollingX: false,//是否启用 x 或者 y 方向上的滚动 scrollingY: true, speed: 300,//多长时间内完成一次滚动。 数值越小滚动的速度越快 easing: undefined,//滚动动画 参数通animation verticalNativeBarPos: 'right'//原生滚动条的位置 }, rail: {//轨道 background: '#c3c3c3',//轨道的背景色 opacity: 0, size: '6px', specifyBorderRadius: false,//是否指定轨道的 borderRadius， 如果不那么将会自动设置 gutterOfEnds: null, gutterOfSide: '0px',//轨道距 x 和 y 轴两端的距离 keepShow: false //是否即使 bar 不存在的情况下也保持显示 }, bar: { showDelay: 500,//在鼠标离开容器后多长时间隐藏滚动条 onlyShowBarOnScroll: false,//当页面滚动时显示 keepShow: false,//是否一直显示 background: '#c3c3c3', opacity: 1, hoverStyle: false, specifyBorderRadius: false, minSize: false, size: '6px', disable: false,//是否禁用滚动条 },// 在这里设置全局默认配置 name: 'vuescroll' // 在这里自定义组件名字，默认是vueScroll};在页面中只需要将你需要滚动的内容包裹在<vue-scroll></vue-scroll>中。
解决。
