如何使用CSS实现无滚动条滚动

小编给大家分享一下如何使用CSS实现无滚动条滚动，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获网页没有上下滚动条，下面让我们一起去了解一下吧！

第一种：伪对象选择器

在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，从而实现隐藏滚动条的效果。

例子：

    
        
        
        
            body,html {
                margin: 0;
                padding: 0;
                height: 100%;
                overflow: hidden;
            }
            ul,li {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            .box_wrap {
                margin: 20px auto;
                width: 200px;
                height: 400px;
                border: 1px solid #ccc;
                overflow: hidden;
            }
            .box_wrap ul  {
                width: 220px;/* 多出20像素是滚动条的位置，会被父容器盖住就看不到了 */
                height: 100%;
                overflow-x: hidden;
                overflow-y: auto;
            }
            .box_wrap ul li {
                width: 200px;
                height: 40px;
                line-height: 40px;
                border-bottom: 1px solid #ccc;
                font-size: 12px;
                text-align: center;
            }
        
    
    
        
            

                
测试数据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