Awesome Open Source
Awesome Open Source

better-scroll

better-scroll PC iscroll API iscroll iscroll feature better-scroll JS 63kb 35kbgzip 9kb JS lib

github

yarn add iwe7-ng-better-scroll

api

import {
  NgBetterScrollModule,
  BetterScrollConfigDefault
} from "iwe7-ng-better-scroll";

@NgModule({
  imports: [
    ...
    NgBetterScrollModule.forRoot(BetterScrollConfigDefault)
    ...
  ]
})
export class AppModule {}

<better-scroll (onPullingDown)="init($event)"
  (onPullingUp)="loadMore($event)">
  <ul>
    <li *ngFor="let item of list">
      {{item}}
    </li>
  </ul>
</better-scroll>
import {
  Component,
  OnInit,
  ElementRef,
  InjectionToken,
  Inject,
  AfterViewInit,
  ViewChild,
  Input,
  OnChanges,
  SimpleChanges,
  EventEmitter,
  Output,
  OnDestroy
} from "@angular/core";
// import BScroll from "better-scroll";
// 
import * as _better_scroll from "better-scroll";
const BScroll = (_better_scroll as any).default || _better_scroll;

export const BETTER_SCROLL_CONFIG = new InjectionToken("BETTER_SCROLL_CONFIG");
import { CdkObserveContent } from "@angular/cdk/observers";

export const BetterScrollConfigDefault = {
  startX: 0,
  startY: 0,
  scrollX: false,
  scrollY: true,
  freeScroll: false,
  directionLockThreshold: 5,
  eventPassthrough: "",
  click: false,
  tap: false,
  bounce: true,
  bounceTime: 800,
  momentum: true,
  momentumLimitTime: 300,
  momentumLimitDistance: 15,
  swipeTime: 2500,
  swipeBounceTime: 500,
  deceleration: 0.001,
  flickLimitTime: 200,
  flickLimitDistance: 100,
  resizePolling: 60,
  probeType: 0,
  preventDefault: true,
  preventDefaultException: {
    tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/
  },
  HWCompositing: true,
  useTransition: true,
  useTransform: true,
  bindToWrapper: false,
  observeDOM: true,
  autoBlur: true,
  wheel: false,
  snap: false,
  scrollbar: false,
  pullDownRefresh: {
    threshold: 50,
    stop: 20
  },
  pullUpLoad: { threshold: 50 },
  mouseWheel: {
    speed: 20,
    invert: false
  },
  stopPropagation: false
};

export interface BetterScrollWhellInterface {
  selectedIndex: number;
  rotate: number;
  adjustTime: number;
  wheelWrapperClass: string;
  wheelItemClass: string;
}

export interface BetterScrollEasingInterface {
  style: string;
  fn: Function;
}

export interface BetterScrollSnapInterface {
  loop: boolean;
  threshold: number;
  stepX: number;
  stepY: number;
  easing: BetterScrollEasingInterface;
}

export interface BetterScrollScrollbarInterface {
  fade: boolean;
  interactive: boolean;
}

export interface BetterScrollPullDownRefreshInterface {
  threshold: number;
  stop: number;
}

export interface BetterScrollPullUpLoadInterface {
  threshold: number;
}

export interface BetterScrollMouseWheelInterface {
  speed: number;
  invert: boolean;
}

@Component({
  selector: "better-scroll",
  templateUrl: "./better-scroll.component.html",
  styleUrls: ["./better-scroll.component.scss"]
})
export class BetterScrollComponent implements OnInit, OnChanges, OnDestroy {
  scroll: any;
  // 
  // 
  @Input() startX: number = 0;
  // 
  @Input() startY: number = 0;
  //  true 
  @Input() scrollX: boolean = false;
  //  true 
  @Input() scrollY: boolean = true;
  //  freeScroll  true 
  @Input() freeScroll: boolean = false;
  //  directionLockThreshold 
  @Input() directionLockThreshold: number = 5;
  //  better-scroll  eventPassthrough  verticaleventPassthrough horizontal
  @Input() eventPassthrough: string = "";
  // better-scroll  click  truebetter-scroll  click  event  _constructed true
  @Input() click: boolean = false;
  //  better-scroll  click  tap  true tap  element.addEventListener('tap', doSomething, false); tap ,  tap: 'myCustomTapEvent'
  @Input() tap: boolean = false;
  //  true 
  @Input() bounce: boolean = true;
  // 
  @Input() bounceTime: number = 800;
  //  true 
  @Input() momentum: boolean = true;
  //  momentumLimitTime momentum 
  @Input() momentumLimitTime: number = 300;
  //  momentumLimitDistance momentum 
  @Input() momentumLimitDistance: number = 15;
  //  momentum 
  @Input() swipeTime: number = 2500;
  //  momentum 
  @Input() swipeBounceTime: number = 500;
  //  momentum 
  @Input() deceleration: number = 0.001;
  //  flickLimitTime 
  @Input() flickLimitTime: number = 200;
  //  flickLimitDistance 
  @Input() flickLimitDistance: number = 100;
  //  better-scroll 60ms 
  @Input() resizePolling: number = 60;
  //  probeType  1 scroll  probeType  2  scroll  probeType  3  momentum  scroll  0 scroll 
  @Input() probeType: number = 0;
  //  true preventDefaultException
  @Input() preventDefault: boolean = true;
  // better-scroll  preventDefault preventDefaultException {tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/} inputtextareabuttonselect 
  @Input()
  preventDefaultException: any = {
    tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/
  };
  //  scroller  translateZ(0) 
  @Input() HWCompositing: boolean = true;
  //  CSS3 transition  false requestAnimationFrame 
  @Input() useTransition: boolean = true;
  //  CSS3 transform  false,  top/left ( scroller )
  @Input() useTransform: boolean = true;
  // move  document  move bindToWrapper  true 
  @Input() bindToWrapper: boolean = false;
  //  touch disableMouse  true PC disableMouse  false
  @Input() disableMouse: boolean;
  //  touch disableTouch  false touch  PC disableTouch  true touch 
  @Input() disableTouch: boolean;
  //  scroller  DOM  refresh  scroller  DOM  refresh  false
  @Input() observeDOM: boolean = false;
  // inputtextarea
  @Input() autoBlur: boolean = true;
  // 
  @Input() stopPropagation: boolean = false;

  // ---- ----- //
  @Input() wheel: BetterScrollWhellInterface | boolean = false;
  @Input() snap: BetterScrollSnapInterface | boolean = false;
  @Input() scrollbar: BetterScrollScrollbarInterface | boolean = false;
  @Input()
  pullDownRefresh: BetterScrollPullDownRefreshInterface | boolean = {
    threshold: 50,
    stop: 20
  };
  @Input()
  pullUpLoad: BetterScrollPullUpLoadInterface | boolean = { threshold: 50 };
  @Input()
  mouseWheel: BetterScrollMouseWheelInterface | boolean = {
    speed: 20,
    invert: false
  };

  // outputs
  @Output() onBeforeScrollStart: EventEmitter<this> = new EventEmitter();
  @Output() onScroll: EventEmitter<BScroll.Position> = new EventEmitter();

  // 
  // 
  isCreated: boolean = false;

  @Output() onScrollCancel: EventEmitter<any> = new EventEmitter();
  @Output() onScrollEnd: EventEmitter<BScroll.Position> = new EventEmitter();
  @Output() onTouchEnd: EventEmitter<BScroll.Position> = new EventEmitter();
  @Output() onFlick: EventEmitter<any> = new EventEmitter();
  @Output() onRefresh: EventEmitter<any> = new EventEmitter();
  @Output() onDestroy: EventEmitter<any> = new EventEmitter();

  @Output() onPullingDown: EventEmitter<this> = new EventEmitter();
  @Output() onPullingUp: EventEmitter<this> = new EventEmitter();

  constructor(
    // ElementRefdom
    public ele: ElementRef,
    //  
    @Inject(BETTER_SCROLL_CONFIG) public _default: any
  ) {}
  /**
   *  
   */
  ngOnChanges(changes: SimpleChanges) {
    let hasChanged: boolean = false;
    for (let key in changes) {
      this._default[key] = changes[key].currentValue;
      hasChanged = true;
    }
    if (hasChanged && this.isCreated) {
      this.destroy();
      this.createScroll();
    }
  }
  /**
   * 
   */
  ngOnDestroy() {
    this.destroy();
  }

  ngOnInit() {}

  ngAfterViewInit() {
    this.createScroll();
  }

  /**
   * dom
   * better scroll
   */
  changeContent(e: any) {
    this.refresh();
  }
  /**
   * better scroll
   */
  createScroll() {
    this.scroll = new BScroll(this.ele.nativeElement, this._default);
    // 
    this.isCreated = true;
    this.scroll.on("beforeScrollStart", () => {
      this.onBeforeScrollStart.emit(this);
    });
    this.scroll.on("scroll", (pos: BScroll.Position) => {
      this.onScroll.emit(pos);
    });
    this.scroll.on("scrollCancel", () => {
      this.onScrollCancel.emit();
    });
    this.scroll.on("scrollEnd", (pos: BScroll.Position) => {
      this.onScrollEnd.emit(pos);
    });
    this.scroll.on("touchEnd", (pos: BScroll.Position) => {
      this.onTouchEnd.emit(pos);
    });
    this.scroll.on("flick", () => {
      this.onFlick.emit();
    });
    this.scroll.on("refresh", () => {
      this.onRefresh.emit();
    });
    this.scroll.on("destroy", () => {
      this.onDestroy.emit();
    });
    this.scroll.on("pullingDown", () => {
      this.onPullingDown.emit(this);
    });
    this.scroll.on("pullingUp", () => {
      this.onPullingUp.emit(this);
    });
  }

  // 
  refresh(): this {
    this.scroll.refresh();
    return this;
  }
  //  better-scroll,  
  enable(): this {
    this.scroll.enable();
    return this;
  }
  //  better-scrollDOM  touchstarttouchmovetouchend
  disable(): this {
    this.scroll.disable();
    return this;
  }
  //  x,y 
  scrollBy(x: number, y: number, time?: number, easing?: object): this {
    this.scroll.scrollBy(x, y, time, easing);
    return this;
  }
  // 
  scrollTo(x: number, y: number, time?: number, easing?: object): this {
    this.scroll.scrollTo(x, y, time, easing);
    return this;
  }
  // 
  scrollToElement(
    el: HTMLElement | string,
    time?: number,
    offsetX?: number | boolean,
    offsetY?: number | boolean,
    easing?: object
  ): this {
    this.scroll.scrollToElement(el, time, offsetX, offsetY, easing);
    return this;
  }
  // 
  stop(): this {
    this.scroll.stop();
    return this;
  }
  //  better-scroll
  destroy(): this {
    this.scroll.destroy();
    return this;
  }

  //  slide slide 
  goToPage(x: number, y: number, time?: number, easing?: object): this {
    this.scroll.goToPage(x, y, time, easing);
    return this;
  }
  // 
  next(time?: number, easing?: object): this {
    this.next(time, easing);
    return this;
  }
  // 
  prev(time?: number, easing?: object): this {
    this.scroll.prev(time, easing);
    return this;
  }
  // 
  getCurrentPage(): {
    x: number;
    y: number;
    pageX: number;
    pageY: number;
  } {
    return this.scroll.getCurrentPage();
  }
  //  picker 
  wheelTo(index: number): this {
    this.scroll.wheelTo(index);
    return this;
  }
  // 
  getSelectedIndex(): number {
    return this.scroll.getSelectedIndex();
  }
  //  better-scroll 
  finishPullDown(): this {
    this.scroll.finishPullDown();
    return this;
  }
  //  better-scroll 
  finishPullUp(): this {
    this.scroll.finishPullUp();
    return this;
  }
  trigger(type: string): this {
    this.scroll.trigger();
    return this;
  }
}
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (254,498
Angular (54,879
Better Scroll (62