How to lock scroll snap one direction at a time? - css

Question

I have created a calendar that displays each day in a column, and each day has multiple rows. I also added scroll snap to the grid. So the user can swipe horizontally to view each day. However due to the number of rows under the days, swiping (mobile) moves in both directions (vertically and horizontally). I'd like it to lock the swipe to go one direction at a time. So when the user swipes horizontally, the days move, once the day grid snaps in place, they can scroll vertically, or horizontally if they like. Here is my demo: https://codepen.io/starkana/pen/YzzBgPN
CSS & HTML
*,
:after,
:before {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
}
body {
color: #384ad2;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-size: 1.6rem;
height: 100%;
font-family: arial;
}
a {
text-decoration: none;
color: inherit;
}
body {
background: #ccc;
}
.calendar {
max-height: 100vh;
max-width: 100vh;
display: grid;
grid-template-columns: repeat(9, 80vw);
grid-column-gap: 20px;
scroll-snap-type: x mandatory;
padding-left: 5vw;
transition: transform 0.2s ease-in-out;
overflow-x: scroll;
justify-content: left;
}
.day {
margin-bottom: 100px;
min-width: 0;
scroll-snap-align: center;
}
.day h2 {
font-size: 1.5rem;
font-weight: 900;
letter-spacing: 0.1rem;
text-align: left;
text-transform: uppercase;
margin: 1rem 0;
}
.cards {
display: grid;
grid-row-gap: 6px;
grid-column-gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
justify-content: center;
min-width: 0;
}
.card {
background: #fff;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(49, 54, 68, 0.05),
0 5px 20px rgba(49, 54, 68, 0.08);
max-height: 65px;
margin-bottom: 24px;
position: relative;
transition: box-shadow 0.6s ease, color 0.2s ease,
transform 0.2s ease-in-out;
}
.card:hover {
box-shadow: 0 4px 6px rgba(138, 155, 198, 0.05),
0 5px 25px rgba(82, 112, 194, 0.15);
}
.card:hover .highlighter {
opacity: 1;
}
.card a {
display: grid;
grid-template-columns: 50px auto;
}
.content {
padding: 10px 14px;
position: relative;
border: 1px solid red;
min-width: 0;
}
.title {
font-size: 1.4rem;
font-weight: 800;
overflow: hidden;
padding-bottom: 3px;
text-overflow: ellipsis;
white-space: nowrap;
}
.airing {
font-size: 1.3rem;
font-weight: 600;
opacity: 0.9;
}
.next,
.now {
background: blue;
border-radius: 4px;
top: -14px;
color: white;
font-size: 1.1rem;
font-weight: 800;
padding: 3px 8px;
position: absolute;
right: -12px;
}
.image {
border-radius: 4px 0 0 4px;
height: 100%;
max-height: 65px;
object-fit: cover;
object-position: center;
transition: opacity 0.3s;
width: 100%;
}
<div class="calendar">
<div class="day">
<h2>Monday</h2>
<div class="cards">
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
</div>
</div>
<div class="day">
<h2>Monday</h2>
<div class="cards">
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
</div>
</div>
<div class="day">
<h2>Monday</h2>
<div class="cards">
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
</div>
</div>
<div class="day">
<h2>Monday</h2>
<div class="cards">
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
</div>
</div>
<div class="day">
<h2>Monday</h2>
<div class="cards">
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
</div>
</div>
</div>