Skip to content

Instantly share code, notes, and snippets.

@screeny05
Created November 30, 2017 14:48
Show Gist options
  • Save screeny05/ece97e39b9664ee6320764945ea2773e to your computer and use it in GitHub Desktop.
Save screeny05/ece97e39b9664ee6320764945ea2773e to your computer and use it in GitHub Desktop.
<div class="overlay">
OVERLAY
<div class="scroll--container">
<div class="scroll">
<a href="#" class="scroll--link">Link</a>
<a href="#" class="scroll--link">Link</a>
<a href="#" class="scroll--link">Link</a>
<a href="#" class="scroll--link">Link</a>
<a href="#" class="scroll--link">Link</a>
<a href="#" class="scroll--link">Link</a>
<a href="#" class="scroll--link">Link</a>
<a href="#" class="scroll--link">Link</a>
<a href="#" class="scroll--link">Link</a>
<a href="#" class="scroll--link">Link</a>
<a href="#" class="scroll--link">Link</a>
<a href="#" class="scroll--link">Link</a>
</div>
</div>
</div>
<style>
html,
body {
background: repeating-linear-gradient(tomato, tomato 10px, aliceblue 10px, aliceblue 20px);
width: 100%;
height: 200vh;
overflow: hidden;
}
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.4);
text-align: center;
color: #fff;
overflow: auto;
}
.scroll--container {
margin-top: 60vh;
margin-bottom: 60vh;
width: 100%;
overflow: auto;
}
.scroll--link {
display: inline-block;
color: magenta;
height: 100%;
width: 20vw;
background: green;
}
.scroll {
height: 100px;
white-space: nowrap;
background: red;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment