How to block scrolling on pages-CodePudding

I have issue on my angular app. On my main page I have background element with navbar (navbar overlays background element). Navbar got 100 vh and its commonly works, until I go on my iPad or iPhone ... on this devices page can be scrolled and I really don't want it. How to block scroll on this devices?

For reference, this is my main-page.html:

<app-menu-main></app-menu-main>
<div  style="background-image: url('../../../assets/photos/mock-photo-2.jpg'); background-size: cover;" #scrollTarget>
    <div ></div>
</div>

And my main-page.scss:

@import 'src/styles.scss';
@import 'src/assets/variables/colors.scss';

.page {
    height: 100vh;
    z-index: -10;
}

.page-overlay {
    height: 100vh;
    backdrop-filter: blur(5px);
    background: rgb(0,0,0,0.75);
}

I tried this npm package, but it didn't works: https://stackblitz.com/edit/body-scroll-lock-angular?file=src/app/scroll-block/scroll-block.component.html

CodePudding user response：

Some time ago I need avoid scroll -really was to make a directive to swipper-

Using fromEvent rxjs operator you can try:

  avoidScroll:Subscription=fromEvent(document,'touchmove').subscribe((e:any)=>{
    e.preventDefault();e.stopPropagation();return false;
  });
  ngOnDestroy() {
    ...
    this.avoidScroll && this.avoidScroll.unsubscribe();
  }

NOTE: I'm not check the code

CodePudding user response：

I think the issue is about your size usages

100vh. On some mobile browsers, most commonly Chrome and Safari on iOS, 100vh actually refers to outerHeight. This means the lower toolbar on the browser will not be taken into account, cutting off the last couple of rems of your design.

If you just want to block the scroll you could add the css property: overflow:hidden