ScrollShadow 滚动阴影

用法

import { ScrollShadow } from "@heroui/react";

示例

方向

阴影尺寸

与 Card 组合

隐藏滚动条

可见性变化

自定义样式

Tailwind CSS

全局 CSS

若要自定义组件类，可使用 @layer components 指令。了解更多。

@layer components {
  .scroll-shadow {
    @apply rounded-xl border border-default-200;
  }

  .scroll-shadow--vertical {
    @apply pr-2; /* Add padding for custom scrollbar styling */
  }

  .scroll-shadow--horizontal {
    @apply pb-2;
  }
}

样式参考

HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。

CSS 类

ScrollShadow 组件使用以下 CSS 类（查看源码样式）：

基础类

• .scroll-shadow - 根容器元素

方向变体

• .scroll-shadow--vertical - 纵向滚动（默认）
• .scroll-shadow--horizontal - 横向滚动

状态修饰符

• .scroll-shadow--hide-scrollbar - 隐藏原生滚动条

CSS 变量

ScrollShadow 组件使用 CSS 变量设置渐变遮罩尺寸，并为可见的原生滚动条保留空间：

Data 属性

组件使用 data 属性控制阴影可见性：

• 滚动状态：[data-top-scroll]、[data-bottom-scroll]、[data-left-scroll]、[data-right-scroll] — 当内容可向对应方向滚动时应用
• 组合状态：[data-top-bottom-scroll]、[data-left-right-scroll] — 当内容可向两个方向滚动时应用
• 方向：[data-orientation="vertical"] 或 [data-orientation="horizontal"] — 表示滚动方向
• 尺寸：[data-scroll-shadow-size] — 阴影渐变尺寸数值
• 阴影模式：[data-scroll-shadow-mode] — 渐变由滚动位置推导时为 "auto"；visibility 受控或 isEnabled 为 false 时为 "manual"

滚动驱动的渐变

在 auto 模式下，支持滚动驱动动画的浏览器会直接在 CSS 中根据滚动位置推导渐变。因此遮罩在首次绘制时就是正确的，无需测量，也不会在 hydration 期间出现未渐变内容的闪烁。 不支持的浏览器会回退到上面的 [data-*-scroll] 属性，这些属性在 hydration 之后才写入。自定义样式时需要注意两点：

• 在 auto 模式下，即使没有可滚动内容，根元素也始终会解析出 mask-image。这会使其成为层叠上下文， 并成为 position: fixed 后代元素的包含块。如需退出该行为，请显式设置 visibility。
• 滚动驱动的渐变依赖根元素上的 animation 属性。在同一元素上使用 animate-* 工具类会覆盖它，导致渐变消失。 请改为对外层容器应用动画。

API 参考

ScrollShadow

相关组件