CODEWITHSUNDEEP
angularsass
Yardi
Yardi

Reputation: 463

How to block scrolling on pages

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 class="page" style="background-image: url('../../../assets/photos/mock-photo-2.jpg'); background-size: cover;" #scrollTarget>
    <div class="page-overlay"></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%2Fapp%2Fscroll-block%2Fscroll-block.component.html

Upvotes: 0

Views: 285

Answers (3)

Yardi
Yardi

Reputation: 463

Just make simple (scss):

pointer-events: none;

Good coding everyone, Topic closed.

Upvotes: 2

LeKeque
LeKeque

Reputation: 21

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

Upvotes: 0

Eliseo
Eliseo

Reputation: 57929

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

Using fromEvent rxjs operator you can try:

  avoidScroll:Subscription //declare a variable
  ngOnInit(){
        this.avoidScroll=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

Upvotes: 0

Related Questions