css 不显示滚动条 但可以滚动

CSS是一种用于样式和布局网页的语言，其中有一种常用技巧是隐藏滚动条，但仍然可以滑动页面。下面我们来看一下如何实现这个技巧。

body{
  overflow: hidden;
}

body::-webkit-scrollbar {
  width: 0.5em;
}

body::-webkit-scrollbar-track {
  Box-shadow: inset 0 0 6px rgba(0,0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

首先，我们需要设置body元素的overflow属性为hidden，这将会隐藏默认的滚动条。然后，我们使用CSS伪元素::webkit-scrollbar来定义自己的滚动条样式。这里我们设置了滚动条的宽度、背景和轨道阴影等等。其中，-webkit-前缀用于兼容不同的浏览器。

接下来，我们将滚动条添加到body元素：

body{
  overflow: hidden;
  position: relative;
}

body::before{
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 10px;
  height: 100%;
  background-color: #e5e5e5;
  z-index: 9999;
  opacity: 0.5;
  transition: opacity 0.2s;
  pointer-events: none;
}

body:hover::before {
  opacity: 1;
}

这里我们使用伪元素::before来添加一个宽度为10px、高度为100%的矩形，作为滚动条出现在屏幕右侧。我们还设置了opacity属性来实现滚动条的渐隐效果，并添加了hover事件来在鼠标移至页面时显示滚动条。

总结来说，隐藏滚动条的技巧就是使用CSS伪元素来自定义自己的滚动条样式，再通过设置overflow:hidden和添加伪元素来实现滚动条的隐藏和显示。这种技巧可以让页面更为简洁美观，提高用户体验。