Тем не менее свойство translate3d или left все еще работает
Задний план
Пока я реализовывал карусельный слайдер, я случайно столкнулся с проблемой, из-за которой свойство scrollLeft не контролировалось. Логика автоматического перемещения элементов списка не была сложной. Все, что мне нужно сделать, это просто переместить их, манипулируя количеством прокрутки на каждой продолжительности. Как обычно, я настроил элементы списка в html и JavaScript. Пара кодов ниже, но в сокращенном виде.
<ul class="carousel">
<li class="carousel__item"></li>
<li class="carousel__item"></li>
<li class="carousel__item"></li>
<li class="carousel__item"></li>
<li class="carousel__item"></li>
</ul>
executeAutoSlide() {
// NOTE: Slide one item
const move = this.isLastPage ? 0 : this.carousel.scrollLeft + this.itemSize
this.moveNext(move)
setTimeout(this.executeAutoSlide, duration)
}
На каждом тике он скользит по одному элементу. К сожалению, этот код не работал в этом случае.
Проверка кода
Прежде всего, я объясню, почему я не использую translate3d для перемещения элементов списка. Как вы знаете, translate3d позволяет браузеру применять аппаратный процесс под названием GUP в многопоточном режиме. Выполнение определенного процесса параллельно одному потоку помогает повысить производительность. Многие разработчики упоминают о таких особенностях. Точно так же я мог бы повысить производительность, если бы использовал translate3d вместо scrollLeft. У этой карусели, однако, другая операция. Эта функция не только автоматически прокручивается, но и перетаскивается, и после перетаскивания элементы прокрутки должны прилипать к любому из краев, не уменьшая размер элемента.
Свойство переполнения
Прежде всего, формулируя вывод, причина, по которой приведенный выше код не сделал это, заключается в свойстве переполнения. Я не назначал свойство переполнения контейнеру списка. В данном случае класс карусели. Если свойство переполнения отсутствует, свойство контейнера scrollLeft не будет включено, тем не менее, свойство left или translate3d все еще работает. Поэтому единственное, что я должен исправить, это добавить overflow:auto; или даже overflow:hidden; в порядке.
Заключение
Если ваш элемент не будет двигаться с помощью scrollLeft, сомневайтесь в свойстве переполнения. Возможно, вы могли бы решить проблему прокрутки.
