更改原生样式
chrome提供了良好的css接口，用于更改原生滚动条的样式，主要是下面两个：
::-webkit-scrollbar //滚动条整体部分，可以设置宽度啥的::-webkit-scrollbar-thumb //滚动的滑块
虽然基本实现了设计稿的样子，但这里会有两个问题无法实现：
设计稿中要求滚动条距离右边边框有4px间距滚动条要悬浮于内容之上
firefox：无接口，任性。
IE：只提供颜色接口，无用。
总结：更改原生滚动条样式兼容性差，且无法完成设计稿要求
使用插件
我这里使用插件是：react-custom-scrollbars
安装
npm install --save react-custom-scrollbars
使用
import Scrollbars from 'react-custom-scrollbars';······renderThumb({style, ...props }) {//设置滚动条的样式const thumbStyle = {width: '8px',backgroundColor: '#000000',opacity: '0.2',borderRadius: '6px',right: '4px',};return (<divstyle={{...style, ...thumbStyle }}{...props}/>);}render() {return (<Scrollbars style={{height: 10000}}//这里给个足够高的高度就好renderThumbVertical={this.renderThumb}//传入函数，设置滚动条样式// autoHide><ul>······</ul></Scrollbars>);}
在我看了诸多插件之后，发现多数插件的原理都是使用两层div去包裹住想要展示的content，挤出原生滚动条，用div去画一个。这种组件渲染之后的dom结构如下：
<div>//使用relative，用于子元素定位<div>//使用absolute，挤出原生滚动条······content······<div>//水平滚动条，轨道<div></div>//自定义的滚动条的滑块</div><div>//竖直滚动条，轨道<div></div>//自定义的滚动条的滑块</div></div></div>
常见网站设计调研
在印证了插件的全局滚动条难以设置之后，我调研了一些网站的滚动条设计，由于大部分网站不设计滚动条，所以这里只列举几个典型的设计方案：
网易邮箱：使用了chrome的原生接口，在firefox和ie中会回归本质，而且滚动条出现消失时会产生画面抖动（我们的教师端也会有这个问题）
gitlab：在body使用overflow：scroll，无论高度是否溢出都会在右侧产生一条滚动条，感觉怪怪的，但是解决了画面抖动。
element-ui官网：实现思路与插件类似，但是同样无法应用于body。它使用了自己的scrollbar组件（是一个隐藏组件），却没有暴露给框架使用者。我在看了他们github的issue后猜测，该组件可能存在问题。
封装Scrollbar
使用封装后的Scrollbar
组件使用：
import Scrollbar from {路径};···<Scrollbar flex//父元素使用flex布局时，使用该属性onScroll//自定义滚动事件>content</Scrollbar>
