Topics

Kevin Powell - Community•9mo ago

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•9mo 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.

interpod•9mo ago

but then i scan still scroll backend

snxxwyy•9mo ago

That prevents a scroll bar

interpod•9mo 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•9mo ago

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

interpod•9mo ago

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

snxxwyy•9mo ago

Yeah so your overflow hidden should work then

Kevin Powell - Community Join

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

34KMembers

View on Discord

Want results from more Discord servers?

Add your server

More Posts

Issue with react-router-dom (Route in Routes)I have this routes ```tsx <Routes> <Route path="/" element={<HomePage />} /> <i am having error messages while creating react appcan someone please look at it and tell me whats causing it How add blur effect on geometry in three.js libraryI make circle Geometry in three js I want to add a blur effect on this circle Which CSS Reset is more reliable in todays era?CSS Remedy: https://github.com/jensimmons/cssremedy/blob/master/css/remedy.css or Normalize CSS: htt Styling Components with SASSHello there, I am working an a Portfolio Website for a friend. I've decided to do it in React.js. A Where is this slide transition coming fromI have this navbar on my site and I want it to slide in just like in the video but I couldn't unders background imgi can't seem to get my picture to be the background img on my site. can some tell me what's wrong wi Responsive background image that maintains qualityDoes anyone have any advice on how to handle background images with `background-size: cover;` so th how do you code this design?Hey guys I need to code this design but I am confused I don’t wanna use table tag, I am going to cr How do I recreate this parallax?I'm not sure how to explain it but I want to recreate the "effect" of the image below, basically it'