css设置滚动条样式不生效【antDesign UI Table滚动条样式无法自定义 解决方案】

  1. 检查一下是否设置overview
  2. 检查设置的元素是否是滚动条所在的元素
  3. 通过获取到节点设置scrollTop看看滚动条是否正确
  4. 检查完后仍不生效,检查节点是否设置了 scrollbar-color/scrollbar-width 属性
css 复制代码
  【问题4解决方案】
  
  .ant-table-body {
    scrollbar-color: auto !important; /* 重置为 auto,让 webkit 伪元素完全接管 */
    scrollbar-width: auto !important; /* 重置为 auto */

    &::-webkit-scrollbar {
      width: 4px !important;
      height: 4px !important;
    }
    &::-webkit-scrollbar-track {
      background: transparent !important;
    }
    &::-webkit-scrollbar-thumb {
      background: transparent !important;
      border-radius: 2px !important;
    }
    &::-webkit-scrollbar-button {
      display: none !important;
    }
  }

  /* 容器 hover 时显示滚动条 */
  &:hover {
    .ant-table-body {
      &::-webkit-scrollbar-track {
        background: var(--Surface-Secondary-50, #f4f4f4) !important;
      }
      &::-webkit-scrollbar-thumb {
        background: var(--Text-Body, #525252) !important;
      }
      &::-webkit-scrollbar-button {
        display: none !important;
      }
    }
  }
相关推荐
樱花的浪漫14 小时前
Typescript、Zod基础
前端·javascript·人工智能·语言模型·自然语言处理·typescript
Bigger15 小时前
记一次坑爹的 Cloudflare Pages 部署:Failed to load module script 是怎么把我的 SPA 搞挂的
前端·ci/cd·浏览器
竹林81815 小时前
监听智能合约事件,我用 wagmi v2 踩了三天坑,终于找到了稳定方案
前端·javascript
星栈15 小时前
Makepad 界面怎么做得更像产品,而不是示例
前端·rust
Momo__15 小时前
SSR 懒水合四件套 — 99%的人不知道 Vue 3.5 藏了这些水合策略
前端·vue.js·性能优化
riuphan15 小时前
JavaScript 事件循环:单线程异步编程的核心机制
前端·javascript
YHHLAI15 小时前
告别传统开发!Bun + TS 解锁前端新体验
前端
vim怎么退出15 小时前
Dive into React——调度/并发
前端·react.js·源码阅读
假如让我当三天老蒯15 小时前
React的children属性(自学用)
前端·react.js
秋天的一阵风15 小时前
AGENTS.md:你的AI代码助手,需要一份"项目说明书"
前端·后端·ai编程