У меня есть прокручиваемый div, содержащий карты.Как я могу изменить один на видимой части экрана, когда пользователь проводит?

Question

Существует div, который можно прокручивать по горизонтали.В нем есть 3 других Div (карты).Но я не просто хочу, чтобы его прокручивали.Я хочу, чтобы он работал таким образом, чтобы при смахивании одним движением в любом направлении (влево или вправо) ближайшая карточка полностью попадала в видимую область экрана.Не половина или четверть, но все.

Я попытался дать каждому div ссылку, чтобы я мог получить доступ к элементам, используя это. $ Refs.refNameOfDiv, затем я дал ему событие onTouchStart с методомэто пошло по этому пути ...

//in the template
<div class="scrollable-wrapper">
  <card-item @touchStart="activateCard(ix)" 
              v-for="(item, ix) in items" 
              :ref="'tab' + ix" />
</div>

//in the script
methods: {
  activateCard(indexOfCard){
    if(indexOfCard === 1) {
      this.$refs.tab1.scrollIntoView()
    }
    //ScrollIntoView() is The Element.scrollIntoView() method scrolls the 
    //calling element ( Element per example Element.scrollIntoView() ) into 
    //the visible area of the browser window.
  }
}

Интересно, есть ли способ, которым я мог бы сделать это, используя Javascript или CSS