网站垂直滚动条悬停显示效果

网站垂直滚动条悬停显示效果详细介绍

为了实现鼠标悬停时显示垂直滚动条，平时隐藏滚动条的效果，可以使用以下CSS代码。这种效果可以通过CSS的hover伪类来实现。本教教程是鼠标悬停时显示宽度为5px的滚动条，以下是具体的实现方法：

/* 初始状态下隐藏滚动条 */
.scroll-container {
  width: 300px; /* 容器宽度 */
  height: 200px; /* 容器高度 */
  overflow: hidden; /* 隐藏所有滚动条 */
  overflow-y: scroll; /* 启用垂直滚动 */
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
  -ms-overflow-style: none; /* IE 和 Edge 隐藏滚动条 */
}
/* 针对 Webkit 内核浏览器（Chrome、Safari）隐藏滚动条 */
.scroll-container::-webkit-scrollbar {
  width: 0; /* 设置初始宽度为0，隐藏滚动条 */
}
/* 鼠标悬停时显示滚动条 */
.scroll-container:hover {
  scrollbar-width: thin; /* Firefox 显示细滚动条 */
  scrollbar-color: #888 #f1f1f1; /* 设置滚动条滑块和轨道颜色 */
}
/* Webkit 内核浏览器在鼠标悬停时显示滚动条 */
.scroll-container:hover::-webkit-scrollbar {
  width: 5px; /* 设置滚动条宽度为5px */
}
/* 滚动条轨道 */
.scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道颜色 */
}
/* 滚动条滑块/手柄 */
.scroll-container::-webkit-scrollbar-thumb {
  background: #888; /* 滚动条滑块颜色 */
  border-radius: 10px; /* 滑块圆角 */
}
/* 滚动条滑块在悬停时的颜色 */
.scroll-container:hover::-webkit-scrollbar-thumb {
  background: #555; /* 滑块悬停颜色 */
}
<div class="scroll-container">
  <p>这里是一些内容...</p>
  <p>更多内容...</p>
  <p>滚动以查看更多内容...</p>
  <!-- 添加更多内容来演示滚动效果 -->
</div>

这个CSS代码实现了以下功能：

初始状态下隐藏滚动条

• 使用 overflow: hidden; overflow-y: scroll; 组合隐藏所有滚动条，但启用垂直滚动。
• 使用 scrollbar-width: none; 和 -ms-overflow-style: none; 分别隐藏 Firefox 和 IE/Edge 的滚动条。
• 使用 ::-webkit-scrollbar { width: 0; } 将 Webkit 内核浏览器的滚动条初始宽度设置为0，隐藏滚动条。

鼠标悬停时显示滚动条：

• 使用 :hover 伪类将 scrollbar-width 设置为 thin，从而在鼠标悬停时显示细滚动条，并设置滚动条颜色。
• 在 Webkit 内核浏览器中，通过将滚动条宽度设置为5px来显示滚动条。

滚动条样式

• 定义滚动条轨道的颜色为浅灰色（#f1f1f1）。
• 定义滚动条滑块的颜色为灰色（#888），并在悬停时变为深灰色（#555）。

这个实现确保了在鼠标悬停时显示滚动条，并在平时隐藏它，从而提供了更好的用户体验和美观效果。

,