怎么使用css自动隐藏滚动条，滚动的时候滚动条自动出现

使用CSS实现自动隐藏滚动条，滚动时自动显示可以通过以下步骤实现：

1. 隐藏滚动条：使用`::-webkit-scrollbar`伪元素来隐藏滚动条。

::-webkit-scrollbar {
  width: 0px;
  background-color: transparent;
}

2. 当鼠标移动到区域内时，显示滚动条：使用`:hover`伪类选择器来显示滚动条。

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

3. 当区域内有滚动内容时，显示滚动条：使用`:hover`伪类选择器和`:hover`伪元素选择器来判断是否有内容滚动。

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:vertical:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

完整的CSS代码如下：

/* 隐藏滚动条 */
::-webkit-scrollbar {
  width: 0px;
  background-color: transparent;
}

/* 当鼠标移动到区域内时，显示滚动条 */
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

/* 当区域内有滚动内容时，显示滚动条 */
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:vertical:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

注意，上述代码只适用于WebKit浏览器，如Chrome、Safari等。对于其他浏览器，需要使用不同的样式来隐藏和显示滚动条。