How to use perfect-scrollbar

perfect-scrollbar is a JavaScript library for implementing custom scroll bars. It helps you create customized scroll bars to replace the browser's default scroll bars.

1. Install perfect-scrollbar: You can install perfect-scrollbar through npm or yarn.

npm install perfect-scrollbar --save

yarn add perfect-scrollbar

2. Import perfect-scrollbar: In your project, import perfect-scrollbar as needed.

import PerfectScrollbar from 'perfect-scrollbar';

3. Create a scrolling container: Create a container element in HTML.

<div id="scrollContainer">
  <!-- 添加需要滚动的内容 -->
  <!-- 现在容器 scrollContainer 将具有自定义的滚动条功能。perfect-scrollbar 会自动替换容器的默认滚动条，并在需要时添加自定义样式来实现定制化的滚动效果。-->
</div>

4. Initialize perfect-scrollbar: Initialize perfect-scrollbar in your JavaScript or TypeScript code.

// 获取滚动容器元素
const scrollContainer = document.getElementById('scrollContainer');


// 初始化 PerfectScrollbar
const ps = new PerfectScrollbar(scrollContainer);


// 销毁滚动条
ps.update(); 
ps = null;


//如果你想滚动到某个地方，只需更新scrollTop。
const container = document.querySelector('#scrollContainer');
container.scrollTop = 0;


//events事件
container.addEventListener('ps-scroll-x', () => ...);

events:
ps-scroll-y
This event is triggered when the y-axis is scrolled in either direction.

ps-scroll-x
This event is triggered when the x-axis is scrolled in either direction.

ps-scroll-up
This event is fired when scrolling up.

ps-scroll-down
This event is fired when scrolling down.

ps-scroll-left
This event is fired when scrolling to the left.

ps-scroll-right
This event is fired when scrolling to the right.

ps-y-reach-start
This event is triggered when the scroll reaches the starting point of the y-axis.

ps-y-reach-end
This event is fired when the scroll reaches the end of the y-axis (useful for infinite scrolling).

ps-x-reach-start
This event is triggered when the scroll reaches the starting point of the x-axis.

ps-x-reach-end
This event is triggered when the scroll reaches the end of the x-axis.

For more details, please refer to the official website: Link: https://perfectscrollbar.com/index.htm