189 8069 5689

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

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

10年积累的网站设计、成都做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有德城免费网站建设让你可以放心的选择与我们合作。

第一种:伪对象选择器

在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实现无滚动条滚动
        
        
            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
  •             
        
    

以上是“如何使用CSS实现无滚动条滚动”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网页名称:如何使用CSS实现无滚动条滚动
文章地址:http://cdxtjz.cn/article/pioegd.html

其他资讯