问题：
自己在做界面的时候做到导航栏那一块，发现导航栏内容过多时会出现一个浏览器自带的滚动条，这对于二分布局中左侧的导航栏来说是极其不友好的，因为浏览者可能会因为滚动条的突然出现而视觉干扰从而影响浏览体验，所以现在的任务就是隐藏这个自带的滚动条，或者对于一些有需要的朋友们也可以自己设计滚动条的样式。
解决方案：
首先我们得先制作出一个侧向导航栏：导航栏是在左侧，效果是固定在界面上并且有滚动需要的话可以滚动：
如何制作一个导航栏就不说了，有很多现成的ui类库可供使用，对css了解得比较深入的话自己写一个也不是很费事，我这里就直接上图了。
想要实现让其固定且滚动的话记得给列表元素加上这些样式：
ul.left-nav {
position: fixed;
left: 0;
top: 0;
bottom: 0;
overflow-x: hidden;
}-
解决方法一
好的我们先来看下这个更简单但是局限性更大的方法，那就是直接利用伪元素系列-webkit-scrollbar，直接给你的列表元素加上这个伪元素然后设置一个属性就完美解决：
ul::-webkit-scrollbar {
display: none;
}话说这个好像是适用于手机端的伪元素但是经过测试发现pc端也是有效果的，但是大家肯定都看出来了，这个-webkit前缀就说明它只适用于基于webkit内核的浏览器比如谷歌，对于其他浏览器滚动条该出现还是会出现的。
此外有很多与之类似的伪元素是用来自定义滚动条的，比如-webkit-scrollbar-track用于设置滚动槽样式，-webkit-scrollbar-thumb:hover用于设置悬浮在滚动条上触发的样式，此类伪元素还有很多，足够你设置出一个炫酷的条条，这方面就不详细展开叙述了，因为其他的博客和文章已经说得比较详细了，比如这个转载的博客CSS3自定义滚动条样式 -webkit-scrollbar。
-
解决方法二
下面这个方案才是我们今天的重点，上面那个方案是直接对列表进行伪元素操纵达到效果，而这个方案是通过在列表外面包裹两个div元素来实现的：
<div class="nav-outter">
<div class="nav-inner">
<ul class="...">
...
...
</ul>
</div>
</div>
然后我们就可以把先前对ul列表元素的设置都放到这个外面的div元素里来了，注意这里的宽度需要和你写列表项的宽度一致，我这里是200px:
.nav-outter {
position: fixed;
top: 0;
bottom: 0;
width: 200px;
overflow-x: hidden;
}接着设置里面div元素的属性，这里的宽度需要比外块的宽度更大，多出的范围刚好就是滚动条的宽度，我这里就增加了20px这样足以覆盖滚动条，这样的话父元素就可以用overflow-x: hidden将这部分给屏蔽，另外这里一定要给height属性设置100%，少了的话不美观，多了的话那这个div又会出现自带滚动条，不设置的话就会默认为这整个元素的高度，那同样和前一种情况一样，即会出现div自带的滚动条。（这里的overflow-x: hidden是我试出来的，但是我其实没想明白它在这里的作用，知道的朋友还请不吝赐教）
.nav-inner {
width: 220px;
height: 100%;
overflow-x: hidden;
}做到这里就已经大功告成了，这个时候打开浏览器查看你的效果你会发现滚动条没有了而自己还能随心所欲地上下滑动。当然更为关键的是它是兼容大多数浏览器的（目前只测试过谷歌，火狐，IE11，edge，这些都可行，有些老版的IE好像需要加*zoom属性）。
所以噫吁嚱长叹一声终于可以做右边的界面了。
其实要隐藏滚动条肯定还有其他方法，只是我功力浅薄还不太懂。当然还有一些好玩的偏方法，比如就在外面仅套一个div元素，然后设置一下它的样式：
.nav-wrap {
width: 1500px;
height: 100%;
overflow-x: hidden;
position: fixed;
top: 0;
bottom: 0;
}哈哈哈哈哈通过设置宽度让滑动条隐藏到看不见的右边，也可以实现隐藏滑动条的“视觉效果”，当然这样做是有问题的，比如鼠标放在右边的区域滑动的也是导航条，所以也就是个玩笑方法啦。
第一次写博客，也完全是当做自己记录一些东西方便日后查看，如果有写得不好或不对的地方还请指出。
