How do I add the CSS scrolling shadows to a horizontally scrolled container?

Question

I followed the answer from this question and changed it slightly so that this would work on a container that should be scrolled through horizontally. The goal is to add linear-gradient to the edges of the container and make the gradients stay on the edge while the container is being scrolled through. When the user is on the far left of the container, the left shadow should not be visible, same for the right side. So when the user is in the middle, both shadows should be visible.

I used the same code from one of the examples at the bottom of the answer and added it to the ::after pseudoelement of the container. I used linear-gradients for all of the shadows and just changed background-attachment: local to scroll for the second set of gradients.

However, when I tried to scroll through it did not have the same effect horizontally. When the container is scrolled through, the gradients stay fixed in the same position, and only the red gradients are shown.

How do I fix this?

const boxesView = document.querySelector('.boxes')
const boxes = document.querySelectorAll('.box')

// btns
const forwardBtn = document.querySelector('#forwards')
const backBtn = document.querySelector('#backwards')

boxSize = boxes[0].clientWidth


forwardBtn.addEventListener('click', () => {
  boxesView.scrollBy(boxSize, 0)
})

backBtn.addEventListener('click', () => {
  boxesView.scrollBy(-boxSize, 0)
})

.boxes-container {
  margin-top: 2rem;
  width: 100%;
  position: relative;
}

.boxes {
  display: flex;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-behavior: smooth;
  position: relative;
}
.boxes::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: 
      linear-gradient(90deg, red 30%, white) left/100px 100% no-repeat local, 
      linear-gradient(90deg, white, red 70%) right/100px 100% no-repeat local, 
      linear-gradient(90deg, blue 30%, white) left/80px 100% no-repeat scroll, 
      linear-gradient(90deg, white, blue 70%) right/80px 100% no-repeat scroll;
  /* Shadows */
  background-attachment: local local scroll scroll;
}
.boxes::-webkit-scrollbar {
  display: none;
}
.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;
}

<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>