使用ScrollShadow

一个可组合的应用滚动阴影效果的任何滚动元素。

用法

使用自动导入的useScrollShadow组合件在可滚动元素的边缘应用淡入淡出阴影，指示滚动方向上有更多内容可用。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam. Morbi accumsan cursus enim, sed ultricies sapien.

<script setup lang="ts">
const el = useTemplateRef('el')

const { style } = useScrollShadow(el)
</script>

<template>
  <div class="max-w-sm bg-elevated/50 rounded-lg">
    <div
      ref="el"
      :style="style"
      class="h-72 p-4 space-y-4 overflow-y-auto"
    >
      <p v-for="i in 6" :key="i">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam. Morbi accumsan cursus enim, sed ultricies sapien.
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useTemplateRef } from 'vue'

const el = useTemplateRef('el')

const { style } = useScrollShadow(el)
</script>

<template>
  <div class="max-w-sm bg-elevated/50 rounded-lg">
    <div
      ref="el"
      :style="style"
      class="h-72 p-4 space-y-4 overflow-y-auto"
    >
      <p v-for="i in 6" :key="i">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam. Morbi accumsan cursus enim, sed ultricies sapien.
      </p>
    </div>
  </div>
</template>

使用CSS mask-image在边缘淡化内容而不是覆盖元素，因此它适用于任何背景。
自动检测元素是否溢出，仅在需要时应用阴影。
支持垂直和水平方向。

API

useScrollShadow(element, options?)

参数

element

MaybeRef<HTMLElement | null | undefined> required

对可滚动元素的模板引用或反应性引用。

options

UseScrollShadowOptions

滚动阴影的配置选项。

style

ComputedRef<CSSProperties | undefined>

使用:style绑定到可滚动元素上的反应式对象。当阴影活动时包含maskImage，否则包含undefined。

isOverflowing

ComputedRef<boolean>

元素的内容是否溢出其可见区域。

arrivedState

{ top: boolean, bottom: boolean, left: boolean, right: boolean }

来自useScroll的被动滚动到达状态。

示例

水平

使用orientation选项用于水平滚动容器：

<script setup lang="ts">
const el = useTemplateRef('el')

const { style } = useScrollShadow(el, { orientation: 'horizontal' })
</script>

<template>
  <div ref="el" class="overflow-x-auto whitespace-nowrap" :style="style">
    <!-- Horizontally scrollable content -->
  </div>
</template>

自定义尺寸

使用size选项更改阴影大小（以像素为单位）：

<script setup lang="ts">
const el = useTemplateRef('el')

const { style } = useScrollShadow(el, { size: 48 })
</script>

<template>
  <div ref="el" class="max-h-[300px] overflow-y-auto" :style="style">
    <!-- Scrollable content -->
  </div>
</template>

useOverlay

A composable to programmatically control overlays.

useToast

A composable to display toast notifications in your app.

使用ScrollShadow

用法

API

参数

返回

示例

水平

自定义尺寸