Является ли перевод хорошей идеей для реализации горизонтальной прокрутки?

Question

Я должен реализовать горизонтальную прокрутку в моем угловом приложении 2, где мне нужно прокрутить на фиксированное количество пикселей. Полоса прокрутки не должна быть видимой, и пользователь будет использовать левую и правую кнопки для прокрутки.

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

Мне придется запросить window.getComputedStyle (), чтобы получить текущее значение преобразования и затем применить перевод.

Answer 1

Попробуйте использовать обычную прокрутку вместо преобразования. Вы по-прежнему можете скрыть полосы прокрутки и включить прокрутку своих кнопок. Просто получите прокручиваемый контейнер с помощью ViewChild и получите доступ к атрибутам прокрутки nativeElements.

yourFile.ts

@ViewChild('scrollElement') scrollableContainer: ElementRef;

onScroll(value){
   this.scrollableContainer.nativeElement.scrollLeft =
              this.scrollableContainer.nativeElement.scrollLeft + value;
}

yourFile.html

<div class="outerContainer">
  <div #scrollElement class="scrollableContainer">
   <!-- yourScrollableContent -->
  </div>
</div>
<button (click)="onScroll(-10)" label="left"></button>
<button (click)="onScroll(+10)" label="right"></button>

yourFile.css

.outerContainer{
 position: relative;
 display: flex;
}
.scrollableContainer{
 overflow: hidden;
}