# Angular Perfect Scrollbar
<a href="https://badge.fury.io/js/ngx-perfect-scrollbar"><img src="https://badge.fury.io/js/ngx-perfect-scrollbar.svg" align="right" alt="npm version" height="18"></a>
This is an Angular wrapper library for the [Perfect Scrollbar](https://utatti.github.io/perfect-scrollbar/). To use this library you should get familiar with the Perfect Scrollbar documentation as well since this documentation only explains details specific to this wrapper.
This documentation is for the latest 5/6.x.x version which requires Angular 5 or newer. For Angular 4 you need to use the latest 4.x.x version. Documentation for the 4.x.x can be found from <a href="https://github.com/zefoy/ngx-perfect-scrollbar/tree/4.x.x/">here</a>.
### EOL Notice
Version 10.0.0 will most likely be the last release of this library. I recommend you to switch to using native Angular scrollbar libraries such as ngx-scrollbar.
### Quick links
[Example application](https://zefoy.github.io/ngx-perfect-scrollbar/)
|
[StackBlitz example](https://stackblitz.com/github/zefoy/ngx-perfect-scrollbar/tree/master)
|
[Perfect Scrollbar documentation](https://github.com/utatti/perfect-scrollbar/)
### Building the library
```bash
npm install
npm run build
```
### Running the example
```bash
npm install
npm run start
```
### Installing and usage
```bash
npm install ngx-perfect-scrollbar --save
```
##### Load the module for your app (with global configuration):
Providing the global configuration is optional and when used you should only provide the configuration in your root module.
```javascript
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true
};
@NgModule({
...
imports: [
...
PerfectScrollbarModule
],
providers: [
{
provide: PERFECT_SCROLLBAR_CONFIG,
useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
}
]
})
```
##### Use it in your HTML template (with custom configuration):
This library provides two ways to create a Perfect Scrollbar element, a component and a directive. Component tries to make the usage as simple as possible and the directive is meant for more custom / advanced use cases.
The scroll area always needs some fixed height to work. The default styles uses 100% as the height value so the parent needs to have fixed height or you need to set it via CSS styles. Otherwise the height keeps growing and you won't get the scrollbars.
**COMPONENT USAGE**
Simply replace the element that would ordinarily be passed to `PerfectScrollbar` with the perfect-scollbar component.
```html
<perfect-scrollbar style="max-width: 600px; max-height: 400px;" [config]="config">
<div>Scrollable content</div>
</perfect-scrollbar>
```
```javascript
[config] // Custom config to override the global defaults.
[disabled] // Disables the Perfect Scrollbar initialization.
[usePSClass] // Use 'ps' class (needed by the ps theme styles).
[autoPropagation] // Automatic swipe and wheel propagation control.
[scrollIndicators] // Enable fading edges scroll indicators showing.
(<psEventName>) // All Perfect Scrollbar events work as bindings.
// Event names are in camel case (not kebab case).
// Example: ps-y-reach-start -> psYReachStart
```
**DIRECTIVE USAGE**
When using only the directive you need to provide your own theming or import the default theme:
```css
@import '~perfect-scrollbar/css/perfect-scrollbar.css';
```
Perfect Scrollbar directive should be used with div elements and can take optional custom configuration:
```html
<div class="ps" style="position: relative; max-width: 600px; max-height: 400px;" [perfectScrollbar]="config">
<div>Scrollable content</div>
</div>
```
```javascript
[perfectScrollbar] // Can be used to provide optional custom config.
[disabled] // Disables the Perfect Scrollbar initialization.
(<psEventName>) // All Perfect Scrollbar events work as bindings.
// Event namea are in camel case (not kebab case).
// Example: ps-y-reach-start -> psYReachStart
```
##### Available configuration options (custom / global configuration):
```javascript
handlers // List of event handlers to scroll the element.
wheelSpeed // Scroll speed for the mousewheel event (Default: 1).
swipeEasing // Use easing for the swipe scrolling (Default: true).
suppressScrollX // Disable X axis in all situations (Default: false).
suppressScrollY // Disable Y axis in all situations (Default: false).
wheelPropagation // Propagate wheel events at the end (Default: false).
useBothWheelAxes // Always use both of the wheel axes (Default: false).
minScrollbarLength // Minimum size (px) for the scrollbar (Default: null).
maxScrollbarLength // Maximum size (px) for the scrollbar (Default: null).
scrollXMarginOffset // Offset before enabling the X scroller (Default: 0).
scrollYMarginOffset // Offset before enabling the Y scroller (Default: 0).
```
For more detailed documentation with all the supported events / options see the the Perfect Scrollbar documentation.
##### Available control / helper functions (provided by the directive):
```javascript
ps() // Returns reference to the PS instance.
update() // Updates the scrollbar size and position.
geometry(prefix) // Returns the geometry with specified prefix.
position(absolute) // Returns the reach or absolute scroll position.
scrollable(direction) // Checks if the given direction is scrollable.
// Direction can be: 'any', 'both', 'x', 'y'
scrollTo(x, y, speed?) // Animate scroll to given x,y coordinates.
scrollToY(position, speed?) // Animate scroll to given vertical position.
scrollToX(position, speed?) // Animate scroll to given horizontal position.
scrollToTop(offset?, speed?) // Animate scroll to given offset from the top.
scrollToLeft(offset?, speed?) // Animate scroll to given offset from the left.
scrollToRight(offset?, speed?) // Animate scroll to given offset from the right.
scrollToBottom(offset?, speed?) // Animate scroll to given offset from the bottom.
scrollToElement(element, offset?, speed?) // Animate scroll to given or matching HTML element.
// Input can be HTMLElement or a query selector string.
```
Above functions can be accessed through the directive reference (available as directiveRef in the component). Position and offset needs to be given in pixels and speed in milliseconds.
没有合适的资源?快使用搜索试试~ 我知道了~
ngx-perfect-scrollbar:完美滚动条的角度包装库
共41个文件
json:14个
ts:12个
md:4个
需积分: 26 2 下载量 49 浏览量
2021-05-12
03:38:10
上传
评论
收藏 183KB ZIP 举报
温馨提示
角度完美滚动条 这是的Angular包装器库。 要使用该库,您还应该熟悉Perfect Scrollbar文档,因为该文档仅说明特定于此包装器的详细信息。 本文档适用于需要Angular 5或更高版本的最新5 / 6.xx版本。 对于Angular 4,您需要使用最新的4.xx版本。 可以从找到4.xx的文档。 停产通知 版本10.0.0最有可能是该库的最新版本。 我建议您切换到使用本机Angular滚动条库,例如ngx-scrollbar。 快速链接 | | 建立图书馆 npm install npm run build 运行示例 npm install npm run start 安装和使用 npm install ngx-perfect-scrollbar --save 为您的应用加载模块(具有全局配置): 提供全局配置是可选的,并且在使用全局配置时,应仅在根模块中提供配置。
资源详情
资源评论
资源推荐
收起资源包目录
ngx-perfect-scrollbar-master.zip (41个子文件)
ngx-perfect-scrollbar-master
stylelint.json 6KB
angular.json 3KB
.npmignore 112B
CONTRIBUTING.md 619B
tsconfig.json 617B
LICENSE.md 1KB
tslint.json 3KB
README.md 7KB
.editorconfig 234B
.gitignore 112B
package-lock.json 594KB
projects
lib
stylelint.json 6KB
src
lib
perfect-scrollbar-force-native-scroll.directive.ts 363B
perfect-scrollbar.component.ts 9KB
perfect-scrollbar.component.css 6KB
perfect-scrollbar.directive.ts 10KB
perfect-scrollbar.module.ts 634B
perfect-scrollbar.component.html 763B
perfect-scrollbar.interfaces.ts 2KB
public-api.ts 401B
tsconfig.json 459B
tslint.json 37B
README.md 7KB
ng-package.json 379B
package.json 514B
app
stylelint.json 6KB
src
main.ts 177B
index.html 1KB
styles.css 80B
polyfills.ts 28B
environments
environment.ts 662B
environment.prod.ts 51B
favicon.ico 948B
app
app.component.css 1KB
app.module.ts 784B
app.component.html 4KB
app.component.ts 2KB
tsconfig.json 218B
tslint.json 37B
browserslist 429B
package.json 2KB
共 41 条
- 1
少女壮士
- 粉丝: 26
- 资源: 4660
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- YOLOV4-TINY权重文件
- 以下是一个使用贪心算法解决多机调度问题的基本步骤0.txt
- 基于大数据的房产估价是近年来随着技术的发展而兴起的一种新型估价方法.txt
- 企业供应链管理系统v3.rar
- 富芮坤FR8016HA蓝牙开发板使用手册+硬件PCB图+封装库+DEMO演示软件源代码.zip
- 基于YOLOv7的芯片表面缺陷检测系统
- 京东物流 数字化供应链综合研究报告2018.rar
- 基于YOLOv7的植物虫害识别&防治系统
- 2000.1-2023.8中国经济政策不确定性指数月度数据.xlsx
- Screenshot_2024-04-21-20-42-15-443_com.tencent.mm.jpg
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0