<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Youtube | Insta | Tiktok | Reels </title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: black;
}
.reelsContainer {
/* background: pink; */
height: 80vh;
width: 25vw;
margin-top: 4em;
display: flex;
overflow: auto;
gap: 2em;
flex-direction: column;
scroll-snap-type: y mandatory;
}
.reelsContainer::-webkit-scrollbar {
display: none;
}
.reel {
min-height: 75vh;
min-width: 25vw;
background-color: red;
scroll-snap-align: start;
}
</style>
</head>
<body>
<div style="display: flex; justify-content: center;">
<div class="reelsContainer">
<div class="reel">1</div>
<div class="reel">2</div>
<div class="reel">3</div>
<div class="reel">4</div>
<div class="reel">5</div>
<div class="reel">6</div>
</div>
</div>
</body>
</html>
Ashish Kumar Verma
Posted on
10
Create Youtube Shorts, Insta Reels, Tiktok like scrolling effect | Just HTML and CSS
Hands-on debugging session: instrument, monitor, and fix
Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (4)
Exactly what I needed to get started. Thanks!
How can we restrict user to scroll multiple reels once?
is it possible?
for some reason, in mobile view, the reels are very squeezed, why? and how would you fix it?
Because the width is 25vw which means 25 parts of 100 parts of screen so basically when you are in an mobile view of let's say 200px it's just 8px of width that's why
so a quick fix is -> write a media query for mobile and change the reelsContainer to 90vw !
I hope it answers your question !