如何通过transition/animation实现滚动条宽度平滑扩展？现有方案失效求助

我尝试通过transition实现滚动条宽度的平滑扩展，目前可以通过为自定义滚动条添加类来改变宽度，但无法实现平滑过渡效果。以下是我的代码：

原代码 #

CSS #

.articles-container
{
    transition: width 2s ease-in-out; 
}
.articles-container::-webkit-scrollbar 
{
    width: 20px;      
    transition: width 2s ease-in-out;  
}
.articles-container.expanded::-webkit-scrollbar 
{
    width: 30px;
    transition: width 2s ease-in-out; 
}

JavaScript #

var myDiv = document.querySelector('.articles-container');
// bunch of onscrollbar calculations here

if (onscrollbar) 
{
  // console.log('Mouse is on the scrollbar');
  myDiv.classList.add('expanded');
} 
else 
{
  // console.log('Mouse is not on the scrollbar');
  myDiv.classList.remove('expanded');
}

请问如何为滚动条宽度添加transition或animation？当前方法无效，是否有其他实现方式？

解决方案 #

问题根源 #

::-webkit-scrollbar这类滚动条伪元素的transition属性在多数浏览器中不被支持，直接设置无法触发平滑过渡，这是浏览器对滚动条样式的限制导致的。

替代实现方案 #

方法一：伪元素模拟滚动条（推荐）

通过隐藏原生滚动条，用容器的伪元素模拟滚动条外观，伪元素的样式过渡可以正常生效：

/* 外层容器：隐藏原生滚动条，设置相对定位 */
.articles-container {
  position: relative;
  overflow-y: scroll;
  /* Firefox 隐藏原生滚动条 */
  scrollbar-width: none;
  /* IE/Edge 隐藏原生滚动条 */
  -ms-overflow-style: none;
}

/* Chrome/Safari 隐藏原生滚动条 */
.articles-container::-webkit-scrollbar {
  display: none;
}

/* 模拟滚动条的伪元素 */
.articles-container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  background-color: #ccc; /* 匹配原生滚动条背景色 */
  transition: width 0.2s ease-in-out; /* 平滑过渡宽度 */
  pointer-events: auto; /* 允许鼠标检测，适配你的JS逻辑 */
}

/* 鼠标在滚动条上时扩展宽度 */
.articles-container.expanded::after {
  width: 30px;
}

JavaScript代码无需修改，依然通过添加/移除expanded类触发过渡。如果需要模拟滚动条的滑块（thumb），可以再添加一个伪元素，并通过JS监听容器滚动事件同步滑块位置。

方法二：嵌套容器过渡内边距（简易版）

如果不想完全模拟滚动条，可通过调整容器内边距实现视觉上的平滑扩展：

.articles-container {
  overflow-y: scroll;
  padding-right: 20px;
  transition: padding-right 0.2s ease-in-out;
}

.articles-container::-webkit-scrollbar {
  width: 20px;
}

.articles-container.expanded {
  padding-right: 30px;
}
.articles-container.expanded::-webkit-scrollbar {
  width: 30px;
}

此方法中滚动条宽度变化仍为瞬间，但容器内边距的过渡会营造出平滑扩展的视觉效果，适合需求简单的场景。

内容的提问来源于stack exchange，提问作者Soumya Roy