用CSS隐藏或自定义侧向导航栏的滚动条

问题：

自己在做界面的时候做到导航栏那一块，发现导航栏内容过多时会出现一个浏览器自带的滚动条，这对于二分布局中左侧的导航栏来说是极其不友好的，因为浏览者可能会因为滚动条的突然出现而视觉干扰从而影响浏览体验，所以现在的任务就是隐藏这个自带的滚动条，或者对于一些有需要的朋友们也可以自己设计滚动条的样式。

解决方案：

首先我们得先制作出一个侧向导航栏：导航栏是在左侧，效果是固定在界面上并且有滚动需要的话可以滚动：

         如何制作一个导航栏就不说了，有很多现成的ui类库可供使用，对css了解得比较深入的话自己写一个也不是很费事，我这里就直接上图了。

 

想要实现让其固定且滚动的话记得给列表元素加上这些样式： 

ul.left-nav {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    overflow-x: hidden;
}

• 解决方法一

好的我们先来看下这个更简单但是局限性更大的方法，那就是直接利用伪元素系列-webkit-scrol