угловая прокрутка в сторону при нажатии кнопки

Question

У меня есть div, содержащий несколько карт.Иногда карт больше, чем может показать окно.В этом случае я хочу иметь левую и правую кнопки для прокрутки одной карты влево / вправо при нажатии.Я не хочу показывать горизонтальную полосу прокрутки.

<div class=lane>
    <span class='arrow-left' (click)="scrollOneCardLeft()">left</span>
    <span class='arrow-right' (click)="scrollOneCardRight()">right</span>
    <div  class=card-cont *ngFor="let card of myCards; let i = index">
       <div class="card"></div>
    </div>  
</div> 

.lane {
  background-color: red;
  margin: 0;
  display: flex;
  justify-content: left;
  align-items: center;
  overflow-x: hidden;
  overflow-y: hidden;
}

span.arrow-left,span.arrow-right{
  display: block;
  position: absolute;
  background-color: #555;    
  color:pink;
  z-index: 2;
  cursor: pointer;
  height:200px;
}
span.arrow-left{
  left: 0px;
}
span.arrow-right{
  right: 0px;
}
.card-cont {
  margin: 10px;
}
.card {
  width: 200px;
  height: 100px;
  background-color: red;
}

Как мне реализовать scrollOneCardLeft () и scrollOneCardRight () для углового компонента, чтобы при нажатии прокручивался один элемент?

Answer 1

У меня была та же проблема, и с помощью других постов я остановил эти 2 метода.

  scrollLeft(el: Element) {
    const animTimeMs = 400;
    const pixelsToMove = 315;
    const stepArray = [0.001, 0.021, 0.136, 0.341, 0.341, 0.136, 0.021, 0.001];
    interval(animTimeMs / 8)
      .pipe(
        takeWhile(value => value < 8),
        tap(value => el.scrollLeft -= (pixelsToMove * stepArray[value])),
      )
      .subscribe();
  }

  scrollRight(el: Element) {
    const animTimeMs = 400;
    const pixelsToMove = 315;
    const stepArray = [0.001, 0.021, 0.136, 0.341, 0.341, 0.136, 0.021, 0.001];
    interval(animTimeMs / 8)
      .pipe(
        takeWhile(value => value < 8),
        tap(value => el.scrollLeft += (pixelsToMove * stepArray[value])),
      )
      .subscribe();
  }

Они используют реактивные операции для постепенного изменения левой позиции прокрутки.
Может быть, попробуйте поиграться с числами, этот подход соответствует моим потребностям, с парой твиков, которые могут соответствовать вашим.

Вы можете вызвать их по событию (click), передав ссылку в ваш список (контейнер с горизонтальной прокруткой)

  <div class="horizontal-scroll" #list>...</div>
  <button (click)="scrollLeft(list)">Left</button>