CSS隐藏滚动条的方法-前端-阿习进阶博客
Java
MySQL
大数据
Python
前端
黑科技
    首页 >> 互联网 >> 前端

CSS隐藏滚动条的方法

[导读]:方法一: 纯CSS+div样式隐藏。 在需要滚动的元素外面再套一个div,给最外面的div设置样式overflow:hidden,宽度比需要滚动的元素小; 之后给需要滚动的元素设置样式overflow-x:hidden;overflow-y:scroll; style type=text/css *{margin:0;padding:0;} .box...
  方法一:
  纯CSS+div样式隐藏。
  在需要滚动的元素外面再套一个div,给最外面的div设置样式overflow:hidden,宽度比需要滚动的元素小;
  之后给需要滚动的元素设置样式overflow-x:hidden;overflow-y:scroll;
 
   
           
  • 1111
  •        
  • 1111
  •        
  • 1111
  •        
  • 1111
  •        
  • 1111
  •        
  • 1111
  •        
  • 1111
  •    
     
      方法二
      给需要滚动的元素添加伪选择器,::-webkit-scrollbar{width:0;},
      将宽度设为0,滚动条就会隐藏。
      PS:
      可以设置滚动条样式,使其美观。
     
      /*滚动条宽长,滚动条整体部分,其中的属性有width,height,background,border等。*/

    ::-webkit-scrollbar{

             width: 7px;

        }

      /*滚动条的滑轨背景颜色,可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。*/
    ::-webkit-scrollbar-track{
            background-color: #f5f5f5;
     
              -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.1);
     
           border-radius:5px;
     
    }
     
      /*滑块颜色*/

        ::-webkit-scrollbar-thumb{

            background-color: rgba(0, 0, 0, 0.2);

            border-radius: 5px;

        }

      /*滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。*/

      ::-webkit-scrollbar-button{

            background-color: #eee;

            display: none;

       }

      /*横向滚动条和纵向滚动条相交处尖角的颜色*/
     

     ::-webkit-scrollbar-corner{

            background-color: black;

        }

    小二感谢你的点赞 留言


     

    本文来自阿习进阶博客,如若转载,请注明出处:https://yanxias.com

    留言区

    联系人:
    手   机:
    内   容:
    验证码:

    历史留言

    联系人:阿习

    手机号:156****7890

    留言内容:欢迎大家一起讨论文章,有喜欢发帖的可以私聊我给你开权限,发文章

    留言时间:2022-05-09 17:46:15

    回复内容:互联网阿习

    回复时间:2022-05-09 17:46:15

    用户IP:220.***.***.232

    用户操作系统:Windows 10

    欢迎加Easy的QQ