We can find scroll width and scroll height of HTML element usingelement.scrollWidth,  element.scrollHeight. Visible width and height of HTML elements are element.offsetWidth,  element.offsetHeight.  Here we are going to use $event.target as element
Source Code       DEMO


<div class="overflow_div" (click)="checkOverflow($event)"> div 1</div>

Script - app.component.ts

Observe checkOverflow function
import { Component } from '@angular/core';
  selector: 'my-app',
  template: `
  <h4>Click on below DIV to check whether they are overflow elements or not</h4>
   <div class="overflow_div" (click)="checkOverflow($event)"> div 1</div>
   <div class="overflow_div" (click)="checkOverflow($event)"> div 2 <br/><br/><br/><br/><br/><br/></div>
   <div class="overflow_div" (click)="checkOverflow($event)"> div 3 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
export class AppComponent {
  checkOverflow($event) {
    if ($event.target.offsetHeight < $event.target.scrollHeight ||
        $event.target.offsetWidth < $event.target.scrollWidth) {
        // your element have overflow
        alert('div is overflown of elements');
    } else {
        // your element doesn't have overflow
        alert('div is not overflown of elements');



Follow this blog by Email

Popular Posts