如何实现div鼠标悬停时滚动条颜色过渡变化？

要将滚动条悬停变色效果从body切换到div上，只需调整HTML结构和CSS选择器即可，具体步骤如下：

1. 调整HTML结构，添加带滚动的div容器 #

给div设置固定高度和溢出属性，让它能生成独立滚动条：

<body>
  <h2>自定义滚动条示例</h2>
  <p><strong>注意:</strong> -webkit-scrollbar 不支持 Firefox 以及 Edge 79 之前的版本。</p>
  <div class="scrollable-div">
    <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
    <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
    <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
    <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
    <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
  </div>
</body>

2. 修改CSS选择器，绑定div的滚动条样式 #

把原body相关的选择器替换为div的类名，并添加div的基础滚动样式：

/* 全局滚动条基础样式 */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* div滚动条滑块默认样式 */
.scrollable-div::-webkit-scrollbar-thumb {
  background-color: red;
  transition: background-color 0.5s ease-in-out; /* 缩短过渡时长，效果更自然 */
}

/* 鼠标悬停div时，滚动条滑块变色 */
.scrollable-div:hover::-webkit-scrollbar-thumb {
  background-color: green;
}

/* 给div添加滚动所需的基础样式 */
.scrollable-div {
  height: 200px; /* 固定高度，超出内容才会生成滚动条 */
  overflow: auto; /* 内容溢出时显示滚动条 */
  border: 1px solid #ddd; /* 可选，方便识别div范围 */
  padding: 10px;
}

关键注意点 #

• 必须给div设置固定高度（或最大高度）+overflow: auto，否则div不会生成独立滚动条，会直接继承body的滚动条
• 滚动条伪元素的选择器顺序要正确：目标元素:hover::-webkit-scrollbar-thumb，确保悬停触发的是对应div的滚动条样式
• 若需兼容Firefox，可使用scrollbar-color属性实现类似过渡效果：

  /* Firefox 兼容写法 */
  .scrollable-div {
    scrollbar-color: red #f1f1f1; /* 滑块颜色 轨道颜色 */
    transition: scrollbar-color 0.5s ease-in-out;
  }
  .scrollable-div:hover {
    scrollbar-color: green #f1f1f1;
  }
  

内容的提问来源于stack exchange，提问作者Anthony R