跨浏览器兼容：鼠标悬停显示滚动条并保持布局稳定

<style type="text/css">
.container {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  overflow: hidden; /* 默认隐藏滚动条 */
  padding: 10px;
}
.container:hover {
  overflow: overlay; /* 悬停时显示浮层滚动条 */
}
.content {
  height: 200px; /* 内容高度大于容器，模拟溢出 */
  background-color: #f0f0f0;
  padding: 5px;
}
</style>

<div class="container">
  <div class="content">
    <p>这是一段很长的内容，用于测试滚动条的显示效果。当鼠标悬停在此容器上时，期望能看到滚动条，并且内容不会因为滚动条的出现而发生任何布局上的移动或抖动。这种效果在某些浏览器中表现良好，但在其他浏览器中可能不被支持。</p>
    <p>更多的内容来确保它会溢出。</p>
    <p>更多的内容来确保它会溢出。</p>
  </div>
</div>

<style type="text/css">
.container {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  overflow: hidden; /* 默认隐藏滚动条 */
  padding: 10px;
}
.container:hover {
  overflow: auto; /* 悬停时显示滚动条 */
}
.content {
  height: 200px; /* 内容高度大于容器，模拟溢出 */
  background-color: #f0f0f0;
  padding: 5px;
}
</style>

<div class="container">
  <div class="content">
    <p>这是一段很长的内容，用于测试滚动条的显示效果。当鼠标悬停在此容器上时，期望能看到滚动条，并且内容不会因为滚动条的出现而发生任何布局上的移动或抖动。这种效果在某些浏览器中表现良好，但在其他浏览器中可能不被支持。</p>
    <p>更多的内容来确保它会溢出。</p>
    <p>更多的内容来确保它会溢出。</p>
  </div>
</div>

<style type="text/css">
.container {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  overflow: auto; /* 允许滚动条自动显示 */
  scrollbar-gutter: stable; /* 预留滚动条空间，防止布局偏移 */
  padding: 10px;
}
/* 注意：这里不再需要 .container:hover 来控制 overflow 属性，
   因为 scrollbar-gutter: stable 已经解决了布局偏移问题。
   如果仍想在悬停时才“明显”显示滚动条，可以通过自定义滚动条样式实现，
   或依赖浏览器默认行为（某些浏览器在 auto 状态下，不溢出则不显示滚动条）。
   对于本问题，核心是解决布局偏移，而非滚动条的完全隐藏/显示控制。
   但为了模拟“悬停显示”的视觉效果，我们可以结合自定义滚动条样式。
*/
.content {
  height: 200px; /* 内容高度大于容器，模拟溢出 */
  background-color: #f0f0f0;
  padding: 5px;
}

/* 针对特定浏览器（如Webkit）的滚动条隐藏/显示优化 */
.container::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
  height: 8px; /* 滚动条高度 */
  background-color: transparent; /* 默认隐藏滚动条背景 */
}

.container::-webkit-scrollbar-thumb {
  background-color: transparent; /* 默认隐藏滚动条滑块 */
  border-radius: 4px;
}

.container:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3); /* 悬停时显示滑块 */
}

.container:hover::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1); /* 悬停时显示轨道 */
}
</style>

<div class="container">
  <div class="content">
    <p>这是一段很长的内容，用于测试滚动条的显示效果。通过`scrollbar-gutter: stable`属性，即使滚动条出现，内容区域的布局也不会发生任何偏移。滚动条会占用预留的空间，而不是挤压内容。</p>
    <p>更多的内容来确保它会溢出。请注意观察，无论滚动条是否显示，文本的起始位置都保持一致，没有水平方向的跳动。</p>
    <p>更多的内容来确保它会溢出。</p>
    <p>更多的内容来确保它会溢出。</p>
    <p>更多的内容来确保它会溢出。</p>
    <p>更多的内容来确保它会溢出。</p>
  </div>
</div>