📞 [CSS] 滚动条设置transition不生效

CSS

问题描述

在编写自定义滚动条的时候，发现给::-webkit-scrollbar-thumb 设置transition (期望在鼠标悬浮在元素上的时候，显示滚动条)不生效。

原因

::-webkit-scrollbar-thumb 是浏览器的伪元素（pseudo-element），属于非标准 CSS 扩展，对它的样式支持是受限的。大多数浏览器不支持对其应用 transition 动画效果。

解决方案

1.通过@property 自定义属性

2.给父元素设置transition

3.通过父元素:hover 改变改自定义属性颜色

4.将 ::-webkit-scrollbar-thumb 中的background-color 赋值为自定义属性

lessCopy

.container {
  @property --thumb-color {
    syntax: '<color>';
    inherits: true;
    initial-value: transparent;
  }

  overflow: auto;
  transition: --thumb-color 0.3s ease;

  &:hover {
    --thumb-color: rgba(22, 130, 230, 0.4);
  }

  &::-webkit-scrollbar {
    width: 8px;
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--thumb-color);
    border-radius: 4px;
  }
 }

注意

该方法存在浏览器兼容性问题

问题描述
原因
解决方案
注意

2025/02/06 07:47

📞 [CSS] 滚动条设置transition不生效

问题描述

原因

解决方案

注意

Contents