Disable button at the end of scroll in Angular 6

disable scrolling angular
stop scroll angular
angular scroll event
angular 7 scroll event
angular 7 scroll to element
how to prevent page scrolling when scrolling a div element
body scroll-lock
enable body scroll when modal is open

In my code I am scrolling div on button clicks. Here is my code.

My Code

I want to disable down button if the user scrolls to the end of div and vise versa. Please help.

You can create a customScroll directive for this..

I have created a demo on Stackblitz. I hope this will help/guide to you/others.

app.component.html

<button [disabled]="appScrollElement.disableBtn" (click)="onPreviousSearchPosition()">Up</button>
<button [disabled]="!appScrollElement.disableBtn" (click)="onNextSearchPosition()">Down</button>

custom-scroll.directive.ts

import { Directive,HostListener,ElementRef} from '@angular/core';

@Directive({
  selector: '[appCustomScroll]',
  exportAs:'appCustomScroll'
})
export class CustomScrollDirective {

    disableBtn:boolean=true;
    top:number;
    offSetHeight:number;
    scrollHeight:number;
    constructor(private eleRef:ElementRef){}

    @HostListener('scroll') onScrollEvent(event:Event){
        this.top=this.eleRef.nativeElement.scrollTop;
        this.offSetHeight=this.eleRef.nativeElement.offsetHeight;
        this.scrollHeight=this.eleRef.nativeElement.scrollHeight;
        if(this.top === 0){
          this.disableBtn=true;
        }
        if(this.top>this.scrollHeight-this.offSetHeight-1){
          this.disableBtn=false;
        }
    }
}

typescript - Disable button at the end of scroll in Angular 6, You can create a customScroll directive for this.. I have created a demo on Stackblitz. I hope this will help/guide to you/others. app.component. 0. scrollTo required. buttons-demo { width: 600px; align-self Angular Front-End. . UI Bootstrap is a library written by Angular UI team. May 02, 2020 · In this post, we will discuss Scroll Events available in Ionic 4 IonContent using which we can scroll Ionic page content to Top, Bottom or to any point providing X Y axis.

Based element height and current position, Disable and enable the button

TS

  public onPreviousSearchPosition(): void {
    this.scrollUp = true;
    this.scrollDown = true;

    if (this.scroll.nativeElement.scrollTop <= 20) {
      this.scrollUp = false;
    }


    this.scroll.nativeElement.scrollTop -= 20;
  }

  public onNextSearchPosition(): void {
    this.scrollDown = true;
    this.scrollUp = true;

    if (this.scroll.nativeElement.scrollTop >=
      this.scroll.nativeElement.offsetHeight - 20) {
      this.scrollDown = false;
    }


    this.scroll.nativeElement.scrollTop += 20;
  }

HTML

<button (click)="onPreviousSearchPosition()" [disabled]="!scrollUp">Up</button>
<button (click)="onNextSearchPosition()" [disabled]="!scrollDown">Down</button>

Slack Blitz

disable-button-at-the-end-of-scroll-in-angular-6, In my code I am scrolling div on button clicks. Here is my code. My Code. I want to disable down button if the user scrolls to the end of div and  Disable Scrolling when angular-material select is open. By default the select-dropwon of angular-material will allow the page to scroll and reposition itself accordingly. On the original page of the material-documentation the select-dropdown shows a differetn behaviour: it blocks scrolling when openend:

you need to find out 2 things:

  1. Height of element <p> by const pHeight = document.querySelector("p").clientHeight;
  2. scroll height bydocument.querySelector("p").scrollHeight

so for finding max scrolling height, simply do this:

ngOnInit() {
   const pHeight = document.querySelector("p").clientHeight;
   this.maxScroll = document.querySelector("p").scrollHeight - pHeight;
}

and disable buttons like this:

<button [disabled]="(scroll.scrollTop === 0)" (click)="onPreviousSearchPosition()">Up</button>
<button [disabled]="scroll.scrollTop === maxScroll"  (click)="onNextSearchPosition()">Down</button>

and add some styles to disable state of buttons, that provide in DEMO

Disable button at the end of scroll in Angular 6 - angular - html, Toggle light/dark theme. Toggle Zen Mode. Project. Download Project. Info. Starter project for Angular apps that exports to the Angular CLI. 1.4k. 4. Files. src. in app.component.html file i have one div element with horizontal scroll and two buttons as Next and Previous. based on these button click i want to move scroll.

try adding this

public onPreviousSearchPosition(): void {
    console.log(this.scroll.nativeElement.scrollTop -= 20);
}

and note that if in scrolled to the top then it will log 0 or a negative number, so check the value each time and disable it if its <=0

Scrolling, In my code I am scrolling div on button clicks. Here is my code. My Code I want to disable down button if the user scrolls to the end of div and vise versa. Please  Implement Infinite Scrolling Using Angular 6 Aug 13, 2018. In this article, we are going to learn that how to implement infinite scroll using angular 6. How To Disable Copy And Paste Options For Entry In Xamarin.Forms Using CustomRenderer May 29, 2018.

Datepicker, The <cdk-virtual-scroll-viewport> displays large lists of elements performantly by only renders a set amount of elements and then when you hit the end renders the rest. Item #6. Item #7. *cdkVirtualFor makes the following context variables​  Smart mode shows button only when you scroll more than two screens down and then you will try to go back to top. Classic mode shows button immediately when you scroll at least one screen down.

Animations transitions and triggers, A label for the button used to open the calendar popup (used by screen readers). start. string. end. string Whether the datepicker pop-up should be disabled. Injection token that determines the scroll handling while the calendar is open. This is really a big problem for SPAs which have a long list of cards/items in my opinion. I hate to scroll down again and again. If I meet the problem when using a web app, I would think why don't you just use simple web pages, the scroll problem just destroy all the good feelings.

Tooltips · Bootstrap, In the two-state button example, the wildcard isn't that useful because there are only Note: Disabling animations application-wide is useful during end-to-end  Angular Quick Tip: Binding Specific Keys to the Keyup and Keydown Events When binding to either the keyup or keydown events in your Angular 2+ templates, you can specify key names. This makes it very easy to trigger the event only when specific keys are pressed.

Comments
  • Thank you so much :)
  • can you plase show. When I am adding console.log line to function my scroll is not working. Can you please edit in my code?