使用CSS实现无滚动条滚动的两种方法

我们都知道，撸页面的时候当我们的内容超出了我们的div，往往会出现滚动条，影响美观。

尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。我们都知道overflow:hidden是可以隐藏滚动条的，但存在的问题是：页面或元素失去了滚动的特性，进而溢出内容也变得不可见，这样肯定是不可取的。百度下大部分都是在说overflow:hidden或者overflow-y: no可以解决问题，但是并不能很好的解决我们的问题，那么怎么办呢？

接下来小萌介绍几种简单的方法，但是也不是完美的解决问题了，各求所需吧

第一种：伪对象选择器

在webkit内核的浏览器里可以定义滚动条样式。在CSS初始处定义

 ::-webkit-scrollbar{
 display:none;(或者是width: 0;)
 }

不过目前本方法只在webkit内核浏览器中有效(Chrome,Safari)。

第二种：变相隐藏

大体思路是在div外面再套一个div。这个div设置overflow:hidden。而内容div设置 overflow-x: hidden;overflow-y: scroll;然后再设置外层div的width小于内容div的width，就是用一个无滚动条的div包裹另一个有滚动条的div，从而实现隐藏滚动条的效果。

例子：



    
        使用CSS实现无滚动条滚动
        
        
    
    
        
            
                测试数据1
                测试数据2
                测试数据3
                测试数据4
                测试数据5
                测试数据6
                测试数据7
                测试数据8
                测试数据9
                测试数据10
                测试数据11
                测试数据12
                测试数据13
                测试数据14
                测试数据15
                测试数据16
                测试数据17
                测试数据18
                测试数据19
                测试数据20
                测试数据21
                测试数据22
                测试数据23
                测试数据24
                测试数据25
                测试数据26
                测试数据27
                测试数据28
                测试数据29
                测试数据30