Struggling with getting overflow right in CSS

user_16908993 0
Viewed 71

For some reason I'm getting stuck on this fairly simple problem. I want a scrollable "website" (just a looong jpg screenshot) framed through an iPad as part of my portfolio. The goal is to show the experience of visiting the site in its entirety without taking up a huge amount of space on the page.

For some reason, I haven't been able to get the overflow working right. This doesn't seem like a hard problem on the surface, but it's got me stumped. Any nudge in the right direction is appreciated.

    .nest {
     position: relative;
    height: 712px;
    overflow-y: scroll;
    }
    .ipad {
    position: absolute;
    top:0px;
    right:0;
    bottom:auto;
    left:0;
    }
    .container{ 
    height: 940px;
    width: 712px;
    position: absolute;
    top:45px;
    background: red;
    }
    .content { 
     width: 712px;
     overflow: auto;
     }
    <div class="nest">
    <div class="container">
      <img class="content" src="https://i.ibb.co/bWmxzkv/Screenshot-2021-05-05-AAA-Service-Company-Demolition-Contractors.png">
    </div>
    <img class="ipad" src="https://i.ibb.co/kcRh56j/ipad-frame-copy.png">
    </div>

css-position overflow css
2 Answers

Remove overflow-y: scroll; from .nest class, and add it to .container class.

.nest {
  position: relative;
  height: 712px;
}

.ipad {
  position: absolute;
  top: 0px;
  right: 0;
  bottom: auto;
  left: 0;
}

.container {
  height: 940px;
  width: 712px;
  position: absolute;
  top: 45px;
  background: red;
  overflow-y: scroll;
}

.content {
  width: 712px;
  overflow: auto;
}
<div class="nest">
  <div class="container">
    <img class="content" src="https://i.ibb.co/bWmxzkv/Screenshot-2021-05-05-AAA-Service-Company-Demolition-Contractors.png">
  </div>
  <img class="ipad" src="https://i.ibb.co/kcRh56j/ipad-frame-copy.png">
</div>

user_143898300

Your main problem is that your .ipad is top of the .content and mouse scroll is doing its job on the .ipad image but you want to scroll the screentshot image!

    <style>
        .nest {
            position: relative;
            height: 712px;
        }

        .ipad {
            position: absolute;
            top: 0;
            left: 0;
        }

        .container {
            height: 875px;
            width: 660px;
            left: 26px;
            position: absolute;
            top: 73px;
        }

        .container > div {
            max-height: 100%;
            overflow-y: scroll;
            position: absolute;
        }

        .content {
            width: 100%;
        }
    </style>


    <div class="nest">
        <img class="ipad" src="https://i.ibb.co/kcRh56j/ipad-frame-copy.png">
        <div class="container">
            <div>
                <img class="content"
                src="https://i.ibb.co/bWmxzkv/Screenshot-2021-05-05-AAA-Service-Company-Demolition-Contractors.png">
            </div>
        </div>
    </div>

Here I changed the order in HTML to fix the z-axis problem, you may also want to use z-index: number in your CSS to fix this too.

user_102913890
Related