@farris/ui-simple-scrollbar v1.0.2

SimpleScrollbar

This library was generated with Angular CLI version 7.2.0.

SimpleScrollbar是一个轻量级的滚动条插件，它会检测内部元素大小变化并自动更新。

使用示例

<div class="test-unit">
  <!-- 将滚动条组件套在需滚动元素的外面，滚动条组件会自动占满其父元素大小 -->
  <simple-scrollbar [alwaysDisplay]="true" [showTrack]="true">
    <div class="padding-unit" *ngFor="let item of paddingContent">
      {{ item }}
    </div>
  </simple-scrollbar>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  paddingContent = [
    "A - 01",
    "B - 02",
    "C - 03",
    "D - 04",
    "E - 05",
    "F - 06",
    "G - 07",
    "H - 08",
    "I - 09",
    "J - 10",
    "K - 11",
    "L - 12"
  ];
}

.test-unit {
  display: block;
  width: 400px;
  height: 300px;
  margin: auto;
  margin-top: 150px;
  border: 4px solid #58a;
  box-sizing: content-box;
}

.padding-unit {
  margin: 15px;
  height: 60px;
  background-color: #58a;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 34px;
  font-weight: bold;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';

import { SimpleScrollbarModule } from '@farris/ui-simple-scrollbar';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    SimpleScrollbarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

参数与方法

/** 是否处理大小变更事件，默认处理 */
@Input() noresize: boolean = false;
/** 鼠标滚轮滚动距离，默认50px */
@Input() wheelUnit: number = 50;
/** 是否始终显示滚动条，默认鼠标悬停时显示 */
@Input() alwaysDisplay: boolean = false;
/** 是否显示轨道背景色，默认显示 */
@Input() showTrack: boolean = true;
/** 外层高度，内容超过该高度则呈现滚动条，默认100% */
@Input() height: string = "";
/** 外层宽度，内容超过该宽度则呈现滚动条，默认100% */
@Input() width: string = "";
/** 滚动事件监听 */
@Output() scroll: EventEmitter<any> = new EventEmitter<any>();

/**
 * 更新滚动条状态
 * @description
 * 更新包括位置、大小、是否应该显示等状态，一般不需要手动调用。
 * 如果在外部直接将滚动条内的元素移除dom，则可能无法立刻自动检测并更新，此时需要手动调用该方法。
 */
public update(): void;