CODEWITHSUNDEEP
htmlcssoverflow
Heidi West
Heidi West

Reputation: 13

CSS lightbox content vertical scrolling

I've set up a lightbox using only CSS and my images are longer than the viewport. The background is scrolling but the images won't.

Live site: https://hwestdesign.com

I've tried changing the overflow to various different settings and on different selectors and nothing is working. I'm really new to this and I don't know if I'm just making a simple mistake. I've read threads that have similar problems but the solutions provided aren't working either.

This is the CSS code I currently have active:

.thumbnail {
max-width: 100%;
}

.lightbox {
display: none;
width: 300px;
height: 300px;
overflow: scroll;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
padding:10px;
text-align: center;
background: rgba(0,0,0,0.8);

}

.lightbox img{
max-width: none;
margin-top: 2%;
overflow-y: visible;
height: auto;
    }


.lightbox:target {
outline: none;
display: block;
overflow: visible;

}

This is the HTML:

<div class="grid-item item1">
        <a href="#img1"><img src="images/covers/hwest.jpg" class="thumbnail"></a>
        <a href="#_" class="lightbox" id="img1"><img class="lightbox-content" src="images/hwestbranding.jpg"></a>
    </div>

When this loads the light box pops up and there is scrolling but it’s only the background underneath the light box that scrolls. The images are longer and I want to be able to scroll just the images vertically. Right now they are the right size but fixed. I’ve tried changing their position and the overflow but it does nothing

Upvotes: 1

Views: 1473

Answers (1)

Bryce Howitson
Bryce Howitson

Reputation: 7690

The combination of position:fixed and the overlay size is causing the issue. Setting an element to a fixed position removes it from the scroll context of the rest of the document. To resolve this you need to give the lightbox container a new scroll context by using the overflow property.

Note: you'll need to place the mouse cursor (pointer event) OVER the lightbox/modal specifically to cause the scroll. Otherwise, the "scroll" action will pass through to the document below

Here's an example:

And a link to codepen since its a bit difficult to see here.

body {
	min-height:300vh;
	background: url(https://images.unsplash.com/photo-1559291001-693fb9166cba) left top repeat;
}

.modal {
    /* dark background overlay helps to position content */
	position: fixed;
	top:0; right:0; bottom:0; left:0;
	background-color: rgba(0,0,0,0.6);
}

.modalInner {
  /* put the white box in the right place */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  /* define how big it is before scrolling */
	width: 80vw;
	height: 80vh;
	overflow-y: scroll;
  /* look & feel */
	background-color: #ffffff;
	padding: 20px;
	border: 1px solid #000;
}
<div class="modal">
	<div class="modalInner">
		<img src="https://images.unsplash.com/photo-1560010871-220685e68662" width="100%" />
	</div>
</div>

Upvotes: 1

Related Questions