動(dòng)畫(huà).gif

perfect-scrollbar 一個(gè)全瀏覽器適用的自定義scrollbar，本文主要演示vue3通過(guò)hooks與directive實(shí)現(xiàn)方法

https://www.npmjs.com/package/perfect-scrollbar

安裝

yarn add perfect-scrollbar

創(chuàng)建usePerfectScrollbar.ts

import PerfectScrollbar from 'perfect-scrollbar'
import 'perfect-scrollbar/css/perfect-scrollbar.css'

export default function usePerfectScrollbar() {
    let ps: null | PerfectScrollbar
    const resize = () => {
        ps && ps.update()
    }
    return {
        install(el: Element | string) {
            if(el){
                ps = new PerfectScrollbar(el, {
                    wheelSpeed: 2,
                    wheelPropagation: false
                })
                window.addEventListener('resize', resize, false)
                return ps
            }
        },
        uninstall() {
            window.removeEventListener('resize', resize, false)
            ps && ps.destroy()
        }
    }
}

創(chuàng)建scrollbarDirective.ts

import { App } from 'vue'
import usePerfectScrollbar from '@/hooks/usePerfectScrollbar'

export default {
    install(app: App) {
        const { install, uninstall } = usePerfectScrollbar()
        app.directive('scrollbar', {
            mounted(el) {
                install(el)
            },
            beforeUnmount() {
                uninstall()
            }
        })
    }
}

在main.ts中注冊(cè)指令

import scrollbarDirective from '@/directive/scrollbarDirective'
const app = createApp(App)
app.use(scrollbarDirective)

使用

<div v-scrollbar></div>

使用中遇到的問(wèn)題

官方的css中ps類(lèi)沒(méi)有帶相對(duì)定位,需要給.ps加上position：relative