svelte3.x中如何创建并美化自定义虚拟滚动条组件？

本文共计1364个文字，预计阅读时间需要6分钟。

基于svelte3.0，自定义PC端虚拟滚动条组件。

svelte-scrollbar：运用svelte3.x创建的桌面PC版自定义美化滚动条组件。

支持：是否原生滚动条、自动隐藏、水平垂直滚动（滚动轮动）。

基于svelte3.0自定义pc端虚拟滚动条组件svelteScrollbar。

svelte-scrollbar：运用svelte3.x创建的桌面pc版自定义美化滚动条组件。支持是否原生滚动条、自动隐藏、水平+垂直滚动(滚轮滑动)、自定义滚动条大小、背景色、间距及动态实时更新等功能。

svelteScrollbar功能及效果有些类似elementUI组件库中的el-scrollbar组件。

◆ 引入使用

在需要使用虚拟滚动条的页面引入组件。

import Scrollbar from '$lib/Scrollbar'

◆ 快速使用

使用<Scrollbar></Scrollbar>包住的内容，即可快速生成一个虚拟滚动条组件。

<!-- //原生滚动条 --> <Scrollbar native> <div>自定义内容信息。</div> </Scrollbar> <!-- //自动隐藏滚动条 --> <Scrollbar autohide={true}> <div>自定义内容信息。