Background overlay with overflow html

Hi, My css structure looks like this:

<html> //scrollable overflow
    <div className="fixed inset-0"><loadingSpinenr/></div>
</html/>

Is there possbility to provent of background scrolling w css when loading spinner visible ?

7 Replies

snxxwyy•16mo ago

If it’s just the spinner on the screen you can just do this-

body {
  min-height: 100vh;
  display: grid;
  place-content: center;
}

body {
  min-height: 100vh;
  display: grid;
  place-content: center;
}

Or if you don’t want to put it on the body use a wrapper.

interpodOP•16mo ago

but then i scan still scroll backend

snxxwyy•16mo ago

That prevents a scroll bar

interpodOP•16mo ago

but if I have some additional content inside body which exceeds 100vh then the scroll appear Am i wrong? I could solve this by doing overflow-hidden

snxxwyy•16mo ago

Yeah you’re right, that’s why I said if it’s just the spinner.

interpodOP•16mo ago

but then How to pass styles from react component to body :/

snxxwyy•16mo ago

Yeah so your overflow hidden should work then