Hide angular button when scrolling down and show it again when scrolling up

Question

Hide angular button when scrolling down and show it again when scrolling up

Seeking a more efficient way to display a button only on up-scroll. My current implementation involves listening for every scroll-event, which seems like it might be too computationally intensive. If anyone has a better approach, I'm open to suggestions! 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 utilized Angular's @HostListener(..) to monitor 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>

Providing the CSS for completeness:

.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;
}

Open to any feedback. :)

Edit: Created a Stackblitz for Testing

Stackblitz

javascript html css angular

Answer 1

Answer №1

To optimize scroll events, consider converting them to Observables and using debounceTime for better control.

You have two options: either add a Subject to pass scroll information or create an Observable from the event itself.

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) {}

Alternatively, you can create an Observable directly from the scroll event:

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

Remember to avoid direct access to window object whenever possible. Additionally, simplify boolean checks like showAddButton === true to just showAddButton. And don't forget to unsubscribe/complete your Observables.

Answer 2

To optimize scroll events, consider converting them to Observables and using debounceTime for better control.

You have two options: either add a Subject to pass scroll information or create an Observable from the event itself.

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) {}

Alternatively, you can create an Observable directly from the scroll event:

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

Remember to avoid direct access to window object whenever possible. Additionally, simplify boolean checks like showAddButton === true to just showAddButton. And don't forget to unsubscribe/complete your Observables.

Answer 3

Answer №2

If I were to enhance the functionality, a slight buffer would be incorporated.

This addition would reduce the app's sensitivity to delicate touches and minimize the level of calculations required.

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;
  }
}

Answer 4

If I were to enhance the functionality, a slight buffer would be incorporated.

This addition would reduce the app's sensitivity to delicate touches and minimize the level of calculations required.

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;
  }
}

Hide angular button when scrolling down and show it again when scrolling up

Component

HTML

Edit: Created a Stackblitz for Testing

Answer №1

Answer №2

Similar questions

Troubleshooting jQuery's issue with dynamically adding input fields

What is the best way to adjust the dimensions of an image using CSS?

Leveraging Ajax for establishing session and displaying outputs

The function $http.get in AngularJS is providing an undefined response

Switching the color scheme between mobile and desktop devices to make the background look

Creating a div with a scrollbar limited to a maximum of 100% of the page size

Utilize React to generate HTML content and send it as the email body through Node.js

Steps for making a "confirm" button within a modal that includes a redirect URL

Typescript: Defining the correct return type for resolved parameters in promises

Utilizing the power of JQuery and KineticJS in HTML5 for Drawing and Interactive Drag-and-Drop

A method for reversing specific characters within lengthy strings

When double quotes are used in a string within an HTML input field, they may display as &

Is there a way to securely store my JWT Token within my application's state?

Allow specific HTML tags to be unescaped in Vue.js

Modify the `value` of the `<input type=color>` element

What is the best way to empty the input field after a download event is completed in Node.JS?

Angular.js - organizing a list of items and preserving the outcome

Adhering to a modular approach to design

Having difficulty encapsulating three.js rendered particles within a single div

How come Font-face isn't functioning properly on Internet Explorer 11?