javascript - css scroll-snap connect containers

Question

there are multiple containers with the same amount of items right next unter each other.

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>
<div class="foo"></div>
<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>
<div class="foo"></div>
<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

each container and their children have the exact same styling:

.container {
  display: grid;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
}
.child {
  scroll-snap-align: start;
}

Is it possible that if one container is scrolled, the others join its position and snap behaviour just like it is one scrolled element? Any ideas on how to solve this problem?

This should be placed within a React application. So if there is no css way, maybe JS does the job.

question from:https://stackoverflow.com/questions/65874712/css-scroll-snap-connect-containers

Answer 1

Waitting for answers