[分享]css不要滚动条却可以滚动

在设计网页时，经常会出现这样一种情况，就是需要实现不显示滚动条，却可以滚动页面的效果。这个需求在实现一些特殊的页面效果时非常常见。那么，该如何实现呢？下面，我们来看一下CSS中的两种方法。 /第一种方...

在设计网页时，经常会出现这样一种情况，就是需要实现不显示滚动条，却可以滚动页面的效果。这个需求在实现一些特殊的页面效果时非常常见。那么，该如何实现呢？下面，我们来看一下CSS中的两种方法。

 /*第一种方法*/
  overflow:scroll; /*设置元素的溢出内容的显示方式为滚动条*/
  -ms-overflow-style:none; /*设置IE10及以上版本的滚动条隐藏*/
  scrollbar-width:none; /*Firefox浏览器中滚动条的隐藏*/

  /*第二种方法*/
  overflow:auto; /*设置元素的溢出内容的显示方式为自动，即默认情况下的滚动条*/
  &::-webkit-scrollbar{ /*针对Chrome和Safari等Webkit内核浏览器设置样式*/
      width:0px; /*设置滚动条的宽度为0*/
      height:0px; /*设置滚动条的高度为0*/
      background-color:transparent; /*设置背景颜色为透明*/
  } 

细心的小伙伴可能会发现，上面第二种方法中用到了伪元素“::-webkit-scrollbar”，这个伪元素用于设置Webkit内核浏览器中的滚动条样式，它只能在Chrome和Safari等Webkit内核浏览器下使用。

以上就是两种实现不显示滚动条却可以滚动页面的CSS方法。根据实际需求和具体浏览器版本的支持，可以选用其中一种或两种方法组合使用。