滚动条选项 | Swiper - v11.2.0

包含滚动条参数的对象。

示例

const swiper = new Swiper('.swiper', {
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
  },
});

层级结构

ScrollbarOptions

索引

属性

可选 dragClass

dragClass: string

滚动条可拖动元素的 CSS 类

默认值: 'swiper-scrollbar-drag'

可选 dragSize

dragSize: number | "auto"

滚动条可拖动元素的大小，单位为 px

默认值: 'auto'

可选 draggable

draggable: boolean

设置为 true 以启用滚动条可拖动功能，允许您控制滑块位置

默认值: false

可选 el

el: any

带有 CSS 选择器或滚动条容器的 HTML 元素的字符串。

默认值: null

可选 enabled

enabled: boolean

一个布尔属性，用于在断点处启用/禁用滚动条

可选 hide

hide: boolean

用户交互后自动隐藏滚动条

默认值: true

可选 horizontalClass

horizontalClass: string

在水平 Swiper 中设置到滚动条的 CSS 类名

默认值: 'swiper-scrollbar-horizontal'

可选 lockClass

lockClass: string

禁用滚动条时，滚动条元素的附加 CSS 类

默认值: 'swiper-scrollbar-lock'

可选 scrollbarDisabledClass

scrollbarDisabledClass: string

当滚动条因断点而被禁用时，添加到 swiper 容器和滚动条元素上的 CSS 类名

默认值: 'swiper-scrollbar-disabled'

可选 snapOnRelease

snapOnRelease: boolean

设置为 true 以在释放滚动条时将滑块位置对齐到幻灯片

默认值: false

可选 verticalClass

verticalClass: string

在垂直 Swiper 中设置到滚动条的 CSS 类名

默认值: 'swiper-scrollbar-vertical'