Easy UI

Appearance

Scrollbar 滚动条 ​

用于替换浏览器原生滚动条，支持自定义滚动条样式。

引入 ​

html
<script type="module">
  import "./node_modules/easy-component-ui/dist/components/ea-scrollbar.js";
</script>
js
import "easy-component-ui/ea-scrollbar";

自定义样式 ​

移步到 CSS Part。

基础用法 ​

通过 height 属性设置滚动条高度，若不设置则根据父容器高度自适应。

header

aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside
aside

footer

header

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

footer

查看代码
html
<ea-scrollbar>
  <div>aside</div>
  <!-- ... -->
</ea-scrollbar>

横向滚动 ​

当元素宽度大于滚动条宽度时，会显示横向滚动条。

horizontal
horizontal
horizontal
horizontal
horizontal
horizontal
horizontal
horizontal
horizontal
horizontal
horizontal
查看代码
html
<div style="height: 200px;">
  <ea-scrollbar>
    <div class="horizontal-section">
      <div class="scrollbar-item">horizontal</div>
      <!-- ... -->
    </div>
  </ea-scrollbar>
</div>

原生滚动条 ​

使用 native 属性使用浏览器原生滚动条样式。

native scrollbar content

native scrollbar content

native scrollbar content

native scrollbar content

native scrollbar content

native scrollbar content

native scrollbar content

native scrollbar content

native scrollbar content

native scrollbar content

native scrollbar content

native scrollbar content

native scrollbar content

native scrollbar content

native scrollbar content

查看代码
html
<ea-scrollbar native>
  <p>native scrollbar content</p>
  <!-- ... -->
</ea-scrollbar>

始终显示 ​

使用 always 属性始终显示滚动条。

always visible scrollbar content

always visible scrollbar content

always visible scrollbar content

always visible scrollbar content

always visible scrollbar content

always visible scrollbar content

always visible scrollbar content

always visible scrollbar content

always visible scrollbar content

always visible scrollbar content

always visible scrollbar content

always visible scrollbar content

always visible scrollbar content

always visible scrollbar content

always visible scrollbar content

查看代码
html
<ea-scrollbar always>
  <p>always visible scrollbar content</p>
  <!-- ... -->
</ea-scrollbar>

指定高度 ​

使用 height 属性设置滚动条高度。

height scrollbar content

height scrollbar content

height scrollbar content

height scrollbar content

height scrollbar content

height scrollbar content

height scrollbar content

height scrollbar content

height scrollbar content

height scrollbar content

height scrollbar content

height scrollbar content

height scrollbar content

height scrollbar content

height scrollbar content

查看代码
html
<ea-scrollbar height="300px">
  <p>height scrollbar content</p>
  <!-- ... -->
</ea-scrollbar>

Scrollbar API ​

Scrollbar Attributes ​

参数说明类型可选值默认值
height滚动条高度string—""
native是否使用浏览器原生滚动条样式boolean—false
noresize是否禁用滚动条的自动调整大小功能boolean—false
always是否始终显示滚动条boolean—false

Scrollbar CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container滚动条容器
track-horizontal水平滚动轨道
track-vertical垂直滚动轨道
thumb-horizontal水平滚动滑块
thumb-vertical垂直滚动滑块
view视图容器

Scrollbar Slots ​

名称说明
default滚动内容

Scrollbar Methods ​

方法名说明参数
scrollTo滚动到指定位置ScrollToOptions

Scrollbar Events ​

事件名说明回调参数(event.detail)
ea-scroll滚动时触发{ scrollTop: number, scrollLeft: number }
ea-end-reached滚动到边界时触发{ direction: 'top' | 'bottom' | 'left' | 'right', scrollTop: number, scrollLeft: number }

Scrollbar CSS Custom Properties ​

属性名说明默认值
--ea-scrollbar-top垂直滑块偏移位置0
--ea-scrollbar-left水平滑块偏移位置0
--ea-scrollbar-track-color轨道背景颜色var(--color-transparent)
--ea-scrollbar-thumb-color滑块背景颜色var(--grey-300)
--ea-scrollbar-thumb-hover-color滑块悬停背景颜色var(--grey-400)
--ea-scrollbar-track-vertical-height垂直轨道高度100%
--ea-scrollbar-track-vertical-width垂直轨道宽度10px
--ea-scrollbar-thumb-vertical-height垂直滑块高度0
--ea-scrollbar-thumb-vertical-width垂直滑块宽度100%
--ea-scrollbar-track-horizontal-height水平轨道高度10px
--ea-scrollbar-track-horizontal-width水平轨道宽度100%
--ea-scrollbar-thumb-horizontal-height水平滑块高度100%
--ea-scrollbar-thumb-horizontal-width水平滑块宽度0