如何强制滚动以捕捉水平滑块中的特定位置

如何解决如何强制滚动以捕捉水平滑块中的特定位置

我制作了一个水平滑块和向左和向右移动的按钮，我的按钮工作正常但是当我点击时，它的位置被破坏了。那么我如何才能使用 JavaScript 强制它仅在特定位置捕捉。

position 1 position 2

const goLeft = document.querySelector(".fa-arrow-circle-left")
const goRight = document.querySelector(".fa-arrow-circle-right")
const cardContainer = document.querySelector(".card-container")

goLeft.onclick = function () {
  cardContainer.scrollLeft -= 1202
}
        
goRight.onclick = function () {
  cardContainer.scrollLeft += 1202
}

.card-container {
  position: relative;
  display: flex;
  flex-direction: row;
  Box-sizing: border-Box;
  width: 100vw;
  height: 35rem;
  left: 50%;
  transform: translateX(-50%);
  overflow-x: scroll;
  overflow-y: hidden;
}

<div class="card-container">
  <i class="fas fa-arrow-circle-left"></i>
  <i class="fas fa-arrow-circle-right"></i>

  <div class="card-1">

    <!-- CARD CONTENT -->

  </div>

  <div class="card-2">

    <!-- CARD CONTENT -->

  </div>

  <div class="card-3">

    <!-- CARD CONTENT -->

  </div>
</div>