Angular hide button on down-scroll/ show on up-scroll

Question

I have implemented a way to show a button only on up-scroll: The way how I implemented, it feels like, it takes way to many computations, because the logic listens for every scroll-event. Maybe some of you nerds, have a better approach than mine. :) The Requirement is: When the Page initially loads or on up-scroll the button should be displayed in the UI. On down-scroll the button should be hidden.

I used Angulars @HostListener(..) to listen for the scroll event.

Component

  public lastScrolledHeight: number = 0;
  public showAddButton: boolean = true;

  @HostListener('window:scroll', ['$event']) onScroll(event) {
    const window = event.path[1];
    const currentScrollHeight = window.scrollY;
    console.log(currentScrollHeight);

    if (currentScrollHeight > this.lastScrolledHeight) {
      this.showAddButton = false;
      console.log('should NOT show button');
    } else {
      this.showAddButton = true;
      console.log('should show button');
    }
    this.lastScrolledHeight = currentScrollHeight;
  }

HTML

  <button class="btn btn-success btn-circle btn-xl"
          [ngClass]="(showAddButton === true) ? 'scale-in' : 'scale-out'"
  </button>

For the sake of completion the CSS:

.scale-out {
  -webkit-animation: scale-out .2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation: scale-out .2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.scale-in {
  -webkit-animation: scale-in .2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation: scale-in .2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

Looking forward for any Input. :)

Edit: I created a Stackblitz for Testing

Stackblitz

Normunds Kalnberzins · Accepted Answer · 2019-02-09 13:18:40Z

2

you should convert scroll events to Observable. Then you can control processing by using debounceTime.

You can either add a Subject, pass the scroll info, then execute your logic

  scroll = new Subject<number>();
  ngOnInit() {
    this.scroll
      .pipe(debounceTime(200))
      .subscribe((y) => this.dealWithScroll(window.scrollY));
  }
  ngOnDestroy() {
    this.scroll.complete();
  }
  @HostListener('window:scroll') watchScroll() {
    this.scroll.next(window.scrollY);
  }
  dealWithScroll(y: number) {}

Or you could create Observable from event

  scroller: Subscription;
  ngOnInit() {    
    this.scroller = fromEvent(window, 'scroll')
      .pipe(debounceTime(200))
      .subscribe(() => this.dealWithScroll(window.scrollY));      }
  ngOnDestroy() {
    this.scroller.unsubscribe();
  }

As you see you can access window object directly. Also showAddButton === true seems excessive showAddButton should be good enough. Don't forget to unsubscribe/complete Observable.

answered Feb 9, 2019 at 13:18

Normunds Kalnberzins

1,24510 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MarcoLe Over a year ago

Wow this is a pretty advanced and nerdy approach. Totally liking the implementation with observable-streams and schedulers (debouncetime() operator).

MCMatan · Accepted Answer · 2019-02-09 13:19:44Z

I would add a small buffer

It would make the app less delicate touch sensitive, and less calculation needed.

export class AppComponent {
  public lastScrolledHeight: number = 0;
  public showAddButton: boolean = true;
  private buffer = 0

  @HostListener('window:scroll', ['$event']) onScroll(event) {
    const window = event.path[1];

    if (this.ignoredByBuffer()) {
      return;
    }

    const currentScrollHeight = window.scrollY;

    if (currentScrollHeight > this.lastScrolledHeight) {
      this.showAddButton = false;
      console.log('should NOT show button');
    } else {
      this.showAddButton = true;
      console.log('should show button');
    }
    this.lastScrolledHeight = currentScrollHeight;
  }

  private ignoredByBuffer(): boolean {
    if (this.buffer < 10) {
      this.buffer += 1;
      return true;
    }
    this.buffer = 0;
    return false;
  }
}

Collectives™ on Stack Overflow

Angular hide button on down-scroll/ show on up-scroll

Component

HTML

Edit: I created a Stackblitz for Testing

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Component

HTML

Edit: I created a Stackblitz for Testing

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related