Search code examples
cssscrollpositionz-indexweb-frontend

CSS: Page is scrollable only if the inner div is focused

I have an underlay and a registration div inside it. The inner div content is dynamic based on registration step.If the content expands in height it becomes scrollable. The problem is that the scroll only works if the mouse is focused/hovered on inner-div. I want it to be able to scroll even if I have my mouse outside inner div (hovered on underlay). Is that possible? and how?

.underlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: #eaeaea;
}

.inner-div{
    position: relative;
    z-index: 3;
}
Solution

  • Problem was in the html code:

    <div class="registration">
 ... content
</div>

<div class="underlay"></div>

    Solution was an simple embedment:

    <div class="underlay">
  <div class="registration">
    ... content
  </div>
</div>