On this page

Scroll 滚动区域

s-scroll 提供自定义滚动条，保留原生视口的滚轮、触摸和键盘滚动能力。用法参考 Mantine ScrollArea。

Hidden Title

基础用法：<s-scroll height="200px"><div>内容</div></s-scroll>

属性事件插槽简介

基础用法（`type` 默认值：`hover`）

显示策略与配置

横向滚动

禁用横向滚动

纵向滚动条位置

订阅滚动位置

滚动边界回调

滚动到指定位置

初始滚动位置

自定义样式

滚动元素进入视口

自动高度

自动高度与弹出层

API

属性	说明	类型 / 可选值	默认值
`width` / `w`	容器宽度	string / number	父元素决定
`height` / `h`	容器高度	string / number	内容决定
`maxHeight`	自动高度上限	string / number	不设置
`autosize`	内容撑开高度，到上限后滚动	boolean	`false`
`type`	滚动条显示策略	`hover / scroll / auto / always / never`	`hover`
`scrollbars`	可滚动方向	`x / y / xy`	`xy`
`offsetScrollbars`	为滚动条留出空间	`false / true / x / y / present`	`false`
`scrollbarSize`	滚动条宽度；`0` 时隐藏滚动条	非负 number	`8`
`scrollHideDelay`	隐藏延时，毫秒	number	`1000`
`overscrollBehavior`	越界滚动行为	`auto / contain / none`	`auto`
`verticalScrollbarPosition`	纵向条位置	`left / right`	跟随文本方向
`startScrollPosition`	初始位置	`{ x?: number, y?: number }`	`{ x: 0, y: 0 }`

事件

事件	参数	说明
`scroll-position-change`	`{ x, y }`	滚动坐标变化
`top-reached` / `bottom-reached`	无	进入纵向边界
`left-reached` / `right-reached`	无	进入横向边界
`overflow-change`	`boolean`	纵向溢出状态变化

插槽和实例

默认插槽放滚动内容。组件实例提供 viewport 原生元素与 scrollTo(options) 方法；viewport 可以使用原生 scrollIntoView、scrollTo 等 API。