I added a shadow to the edges of the container through the fade classes. However, once I did this the scroll bar of the container stopped working and became unresponsive. I cannot scroll through the container without using the forwards and backwards buttons.
How do I fix this?
const boxesView = document.querySelector('.boxes')
const boxes = document.querySelectorAll('.box')
const fade = document.querySelector(".fade");
// btns
const forwardBtn = document.querySelector('#forwards')
const backBtn = document.querySelector('#backwards')
boxSize = boxes[0].clientWidth
document.documentElement.style.setProperty('--background', 'linear-gradient(90deg,#fff 0%, transparent 0% 85%,#fff 100%)')
forwardBtn.addEventListener('click', () => {
boxesView.scrollBy(boxSize , 0)
})
backBtn.addEventListener('click', () => {
boxesView.scrollBy(-boxSize , 0)
})
const firstBox = document.querySelector(".box:first-child");
const lastBox = document.querySelector(".box:last-child");
const firstAndLastBox = [firstBox,lastBox];
console.log(firstAndLastBox);
fade.classList.add("fade-right");
const observeFirst = new IntersectionObserver(entries=>{
// console.log(entries);
const firstBoxDetails = entries[0];
if(firstBoxDetails.isIntersecting){
// document.documentElement.style.setProperty('--background', 'linear-gradient(90deg,#fff 0%, transparent 0% 85%,#fff 100%)')
fade.classList.remove("fade-both-side");
fade.classList.add("fade-right");
}else{
fade.classList.add('fade-both-side');
fade.classList.remove("fade-right");
}
console.log(firstBoxDetails);
},{threshold:1});
const observeLast = new IntersectionObserver(entries=>{
const lastBoxDetails = entries[0];
if(lastBoxDetails.isIntersecting){
fade.classList.remove("fade-both-side");
fade.classList.add("fade-left");
}else{
fade.classList.add('fade-both-side');
fade.classList.remove("fade-left");
}
console.log(lastBoxDetails);
},{threshold:1});
observeLast.observe(lastBox);
observeFirst.observe(firstBox);
.boxes-container {
margin-top: 2rem;
width: 100%;
position: relative;
}
.boxes {
display: flex;
overflow-x: scroll;
scroll-behavior: smooth;
position: relative;
}
.boxes::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: var(--background, );
}
.boxes .box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
width: 332px;
max-width: 332px;
cursor: pointer;
margin-right: 2rem;
}
.boxes .box#last-box {
padding-right: 2rem;
}
.boxes .box .img-container img {
width: 322px;
max-width: 322px;
height: 200px;
-o-object-fit: cover;
object-fit: cover;
border-radius: 10px;
}
.boxes .box h6 {
font-size: 18px;
}
.boxes .box p {
font-size: 14.5px;
font-weight: lighter;
letter-spacing: 0.1px;
}/*# sourceMappingURL=style.css.map */
.boxes{
position: relative;
}
.fade-both-side::before{
position: absolute;
content: "";
/* width: 30px; */
height:100%;
inset: 0;
background: linear-gradient(90deg,red 0%, transparent 10% 92%,red 100%) ;
/* background-color: red; */
}
.fade-left::before{
position: absolute;
content: "";
/* width: 30px; */
height:100%;
inset: 0;
background: linear-gradient(90deg,red 0%, transparent 10% 100%,red 99%) ;
/* background-color: red; */
}
.fade-right::before{
position: absolute;
content: "";
/* width: 30px; */
height:100%;
inset: 0;
background: linear-gradient(90deg,red 0%, transparent 0% 92%,red 100%) ;
/* background-color: red; */
}<button id="backwards">Back</button>
<button id="forwards">Forwards</button>
<div class="boxes-container">
<div class="boxes">
<!-- box 1 -->
<div class="box">
<div class="img-container">
<img src="https://a0.muscache.com/pictures/b6005f78-45e6-403a-bc1d-3351ae83d149.jpg" alt="">
</div>
<h6>Why host on Airbnb?</h6>
<p>Hosts reveal what they love about sharing their space on Airbnb.</p>
</div>
<!-- box 2 -->
<div class="box">
<div class="img-container">
<img src="https://a0.muscache.com/pictures/9ac19f4a-a59c-47f9-8223-09120b52cd2d.jpg" alt="">
</div>
<h6>How to get started on Airbnb</h6>
<p>From creating your listing to prepping your space, learn how to start hosting.</p>
</div>
<!-- box 3 -->
<div class="box">
<div class="img-container">
<img src="https://a0.muscache.com/pictures/4d0cc0ed-ad85-4efd-b98e-386d22ab195a.jpg" alt="">
</div>
<h6>How to earn money on Airbnb</h6>
<p>Here's what every Host needs to know about pricing and payouts.</p>
</div>
<!-- box 4 -->
<div class="box">
<div class="img-container">
<img src="https://a0.muscache.com/pictures/4efaca33-ca90-4d94-a79b-381cf0179355.jpg" alt="">
</div>
<h6>Designing your space</h6>
<p>Designing your space for guests can be a quick way to boost your bookings.</p>
</div>
<!-- box 5 -->
<div class="box" id="last-box">
<div class="img-container">
<img src="https://a0.muscache.com/pictures/3cea79b0-79c3-4604-8fd9-7ef5cee4aa42.jpg" alt="">
</div>
<h6>Secrets from a seasoned Superhost</h6>
<p>Superhost Nikki shares her tips, from setting up to standing out.</p>
</div>
</div>
<div class="fade "></div>
<!-- <div class="fade-left"></div>
<div class="fade-right"></div> -->
</div>