CSS 隐藏滚动条并在悬停时显示，就像Facebook的新聊天侧边栏一样

在本文中，我们将介绍如何使用CSS隐藏网页中的滚动条，并在鼠标悬停时显示，就像Facebook的新聊天侧边栏一样。

阅读更多：CSS 教程

1. 隐藏滚动条

要隐藏滚动条，我们可以使用CSS的::-webkit-scrollbar伪类选择器。该选择器允许我们对滚动条的外观进行自定义。

下面是一个示例，演示如何隐藏滚动条：

/* 隐藏滚动条 */
body::-webkit-scrollbar {
  width: 0.8rem;  /* 设置滚动条宽度 */
  background-color: transparent;  /* 设置滚动条背景颜色为透明 */
}

/* 隐藏滚动条滑块 */
body::-webkit-scrollbar-thumb {
  background-color: transparent;  /* 设置滚动条滑块颜色为透明 */
}

/* 隐藏滚动条轨道 */
body::-webkit-scrollbar-track {
  background-color: transparent;  /* 设置滚动条轨道颜色为透明 */
}

在上述示例中，我们通过设置滚动条、滑块和轨道的背景颜色为透明，实现了隐藏滚动条的效果。

2. 悬停显示滚动条

要在鼠标悬停时显示滚动条，我们可以使用CSS的:hover伪类选择器，以及与::-webkit-scrollbar伪类选择器相结合。

下面是一个示例，演示如何在鼠标悬停时显示滚动条：

/* 显示滚动条 */
body:hover::-webkit-scrollbar-thumb {
  background-color: #888888;  /* 设置滚动条滑块颜色 */
}

/* 显示滚动条轨道 */
body:hover::-webkit-scrollbar-track {
  background-color: #ebebeb;  /* 设置滚动条轨道颜色 */
}

在上述示例中，我们通过将滑块和轨道的背景颜色设置为非透明，实现了在鼠标悬停时显示滚动条的效果。

3. 完整示例演示

下面是一个完整的示例，演示如何隐藏网页中的滚动条，并在鼠标悬停时显示滚动条，效果类似Facebook的新聊天侧边栏：

<!DOCTYPE html>
<html>
<head>
<style>
/* 隐藏滚动条 */
body::-webkit-scrollbar {
  width: 0.8rem;  
  background-color: transparent; 
}

/* 隐藏滚动条滑块 */
body::-webkit-scrollbar-thumb {
  background-color: transparent; 
}

/* 隐藏滚动条轨道 */
body::-webkit-scrollbar-track {
  background-color: transparent; 
}

/* 显示滚动条 */
body:hover::-webkit-scrollbar-thumb {
  background-color: #888888;
}

/* 显示滚动条轨道 */
body:hover::-webkit-scrollbar-track {
  background-color: #ebebeb;
}
</style>
</head>
<body>
<!-- 网页内容 -->
</body>
</html>

通过将上述示例代码嵌入到HTML文件中，您可以隐藏滚动条，并在鼠标悬停时显示滚动条，效果与Facebook的新聊天侧边栏相似。