Angular 19+Tailwind自定义滚动条：鼠标悬停页面时恢复默认样式问题

问题描述 #

在Angular 19项目中使用Tailwind CSS开发，尝试自定义滚动条样式：

• 初始使用以下代码仅能实现基础样式，无法修改圆角或精确控制宽度：

scrollbar-width: thin; 
scrollbar-color: theme('colors.primary.100') theme('colors.grey.200');

• 安装tailwind-scrollbar依赖后，在@layer base中编写WebKit滚动条样式，样式开始生效，但出现异常：仅当鼠标移出浏览器窗口时，自定义滚动条样式正常显示；鼠标悬停在页面内时，滚动条立刻恢复为浏览器默认样式。

效果对比：

鼠标移出窗口（样式正常）	鼠标悬停页面（样式失效）

可能原因 #

1. Angular组件的视图封装机制导致自定义样式被隔离，优先级不足
2. Tailwind CSS的@layer base作用范围与浏览器原生滚动条样式冲突
3. 浏览器针对页面内状态的滚动条默认样式覆盖了自定义规则

解决方案 #

方案1：调整样式优先级与视图封装 #

1. 使用全局样式文件：将滚动条样式写在项目全局样式文件（如src/styles.css）中，避免组件视图封装的影响。
2. 优化样式选择器：用:root作为父选择器提升优先级，移除不必要的!important，同时补充完整的状态样式：

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

  :root::-webkit-scrollbar-track {
    background: theme('colors.grey.200');
    border-radius: 5px;
  }

  :root::-webkit-scrollbar-thumb {
    background: theme('colors.primary.100');
    border-radius: 5px;
    transition: background 0.2s ease;
  }

  :root::-webkit-scrollbar-thumb:hover {
    background: theme('colors.primary.normal');
  }

  /* 局部滚动容器样式（如果页面内有独立滚动区域） */
  .scroll-container::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .scroll-container::-webkit-scrollbar-track {
    background: theme('colors.grey.200');
    border-radius: 5px;
  }

  .scroll-container::-webkit-scrollbar-thumb {
    background: theme('colors.primary.100');
    border-radius: 5px;
  }

  .scroll-container::-webkit-scrollbar-thumb:hover {
    background: theme('colors.primary.normal');
  }
}

3. 关闭组件视图封装（可选）：如果必须在组件内写样式，可关闭当前组件的视图封装：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-target-component',
  templateUrl: './target-component.component.html',
  styleUrls: ['./target-component.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class TargetComponentComponent {}

方案2：正确配置tailwind-scrollbar插件 #

确保tailwind.config.js中正确注册插件，可直接使用插件提供的工具类快速实现样式：

1. 配置Tailwind：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,ts}"],
  theme: { extend: {} },
  plugins: [
    // 注册插件，启用兼容模式或禁用默认样式
    require('tailwind-scrollbar')({ nocompatible: true })
  ]
}

2. 在HTML中使用工具类：

<!-- 全局滚动或局部滚动容器 -->
<div class="scrollbar-thin scrollbar-thumb-primary-100 scrollbar-track-grey-200 scrollbar-rounded-md overflow-auto">
  <!-- 内容区域 -->
</div>

方案3：补充Firefox兼容样式 #

同时保留Firefox的滚动条样式，实现跨浏览器一致性：

@layer base {
  /* Firefox 基础样式 */
  :root, .scroll-container {
    scrollbar-width: thin;
    scrollbar-color: theme('colors.primary.100') theme('colors.grey.200');
  }

  /* WebKit 样式 */
  :root::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  :root::-webkit-scrollbar-track {
    background: theme('colors.grey.200');
    border-radius: 5px;
  }

  :root::-webkit-scrollbar-thumb {
    background: theme('colors.primary.100');
    border-radius: 5px;
  }

  :root::-webkit-scrollbar-thumb:hover {
    background: theme('colors.primary.normal');
  }
}

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