<div class="container">
<div class="scrollport">
<h2>1</h2>
<p>Avoid using CSS scroll-snap when the elements you're snapping to are larger than the viewport - or you end up with something like this, where your readers can't access all your content! (filler text from JeffSum.com)</p>
<p>God help us, we're in the hands of engineers. Must go faster... go, go, go, go, go! This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?</p>
<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Life finds a way. So you two dig up, dig up dinosaurs? My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!</p>
<p>Hey, you know how I'm, like, always trying to save the planet? Here's my chance. God help us, we're in the hands of engineers. Do you have any idea how long it takes those cups to decompose. Hey, take a look at the earthlings. Goodbye! Did he just throw my cat out of the window?</p>
<p>You really think you can fly that thing? Just my luck, no ice. Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!</p>
<p>Jaguar shark! So tell me - does it really exist? You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? They're using our own satellites against us. And the clock is ticking. Jaguar shark! So tell me - does it really exist?</p>
<h2>2</h2>
<p>God help us, we're in the hands of engineers. Must go faster... go, go, go, go, go! This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?</p>
<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Life finds a way. So you two dig up, dig up dinosaurs? My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!</p>
<p>Hey, you know how I'm, like, always trying to save the planet? Here's my chance. God help us, we're in the hands of engineers. Do you have any idea how long it takes those cups to decompose. Hey, take a look at the earthlings. Goodbye! Did he just throw my cat out of the window?</p>
<p>You really think you can fly that thing? Just my luck, no ice. Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!</p>
<p>Jaguar shark! So tell me - does it really exist? You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? They're using our own satellites against us. And the clock is ticking. Jaguar shark! So tell me - does it really exist?</p>
<h2>3</h2>
<p>God help us, we're in the hands of engineers. Must go faster... go, go, go, go, go! This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?</p>
<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Life finds a way. So you two dig up, dig up dinosaurs? My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!</p>
<p>Hey, you know how I'm, like, always trying to save the planet? Here's my chance. God help us, we're in the hands of engineers. Do you have any idea how long it takes those cups to decompose. Hey, take a look at the earthlings. Goodbye! Did he just throw my cat out of the window?</p>
<p>You really think you can fly that thing? Just my luck, no ice. Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!</p>
<p>Jaguar shark! So tell me - does it really exist? You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? They're using our own satellites against us. And the clock is ticking. Jaguar shark! So tell me - does it really exist?</p>
<h2>4</h2>
<p>God help us, we're in the hands of engineers. Must go faster... go, go, go, go, go! This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?</p>
<p>Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Life finds a way. So you two dig up, dig up dinosaurs? My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!</p>
<p>Hey, you know how I'm, like, always trying to save the planet? Here's my chance. God help us, we're in the hands of engineers. Do you have any idea how long it takes those cups to decompose. Hey, take a look at the earthlings. Goodbye! Did he just throw my cat out of the window?</p>
<p>You really think you can fly that thing? Just my luck, no ice. Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!</p>
<p>Jaguar shark! So tell me - does it really exist? You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? They're using our own satellites against us. And the clock is ticking. Jaguar shark! So tell me - does it really exist?</p>
</div>
</div>
body {
background: #34e89e;
background: -webkit-linear-gradient(to right, #0f3443, #34e89e);
background: linear-gradient(to right, #0f3443, #34e89e);
padding: 20px;
margin: 0px;
}
.container {
font-family: sans-serif;
background: white;
display: block;
overflow: hidden;
width: 300px;
margin: 0 auto;
height: 500px;
border-radius: 15px;
}
.scrollport {
padding: 20px;
height: 500px;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.scrollport h2 {
scroll-snap-align: start;
padding-top: 10px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.