Prevent scrolling above a fixed element

Question

I've a full page fixed element to show 'This page is loading' gif image. But the page has contents which overflows the body. And user can scroll it over this fixed element. Is there a CSS way I can prevent this? I could have catch the event and stop it through JS. But a clean CSS way would be great.

.page-loading {
  background: rgba($white, 0.7);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: all 0.5s;
  z-index: 14;

  &__image {
    height: 50px;
    width: 50px;
  }
}

I've refered this. But I want to control it from the component itself.(without JS)

Here's a video. https://www.youtube.com/watch?v=9h_fjEDDwlc. As you can see you can scroll through that fixed element. — Asim K T, Feb 10 '16 at 07:41

score 1 · Answer 1 · answered Feb 10 '16 at 07:55

1

As in the link you already provided, you have to apply overflow:hidden; to your body.

answered Feb 10 '16 at 07:55

Fabian N.

1,221
10
18

Prevent scrolling above a fixed element

1 Answers1