Prevent scrolling / hide footer

Stuck on how to prevent scrolling beyond the embedded object (Typeform) so that they do not see the website footer. From what I've read there are two options.

Option 1 is to hide the footer on the single page which I can't seem to get right.

Option 2 is to create an overscroll-behaviour style CSS and add it to the html code, however, this doesn't seem to work.

Any advice would be great

HTML

  <div class="relative pt-16 m-auto overflow-hidden" style="height: 700px; padding-top: 5em; padding-bottom: 0em;">
      <iframe
        id="typeform-full"
        width="100%"
        height="100%"
        frameborder="0"
        allow="camera; microphone; autoplay; encrypted-media;"
        src="https://2ank089syn0.typeform.com/to/AQlHXdch"
      ></iframe>
      <script
        type="text/javascript"
        src="https://embed.typeform.com/embed.js"
      ></script>
  </div>

Style CSS

html, body{
  overflow-x: hidden; 
  overscroll-behavior: contain;
}

.primary-color-bg {
  background-color: #009695;
}

.secondary-color-bg {
  background-color: #004080; 
}

.text-primary-color {
  color: #009695;
}

.text-secondary-color {
  color: #004080;
}

Footer.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { FooterComponent } from './footer.component';

describe('FooterComponent', () => {
  let component: FooterComponent;
  let fixture: ComponentFixture<FooterComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ FooterComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(FooterComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

footer.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {
  year: number;
  facebookPage = 'omitted';
  instagramAccount = 'omitted';
  linkedInCompany = 'omitted';
  twitterAccount = 'omitted';
  constructor() { }

  ngOnInit(): void {
    this.year = new Date().getFullYear();
  }

}

App routing module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: () =>
      import('./layouts/full-layout/full-layout.module').then(m => m.FullLayoutModule),
  },
  {
    path: '404',
    loadChildren: () =>
      import('./layouts/not-found-layout/not-found-layout.module').then(m => m.NotFoundLayoutModule),
  },
  {
    path: '**',
    redirectTo: '/404',
    pathMatch: 'full',
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled',
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Full layout module.ts

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FullLayoutComponent } from './full-layout.component';
import { FullLayoutRoutingModule } from './full-layout-routing.module';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  declarations: [
    FullLayoutComponent,
    HeaderComponent,
    FooterComponent,
  ],
  imports: [
    CommonModule,
    FullLayoutRoutingModule,
    MatIconModule,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class FullLayoutModule { }

from Recent Questions - Stack Overflow https://ift.tt/3kkP4Mg
https://ift.tt/eA8V8J