Background
While I implemented carousel slider, I accidentally faced the trouble which scrollLeft property was not under control. The logic of how list items move automatically was not complicate. All I need to do is just move them by manipulating scroll amount on each duration. As usual I configured list items in html and JavaScript. A couple of the code is below but abridged.
<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)
}On every tick time it slides one item. Unfortunately this code didn’t work in this occasional.
Inspection of code
First of all, I’m going to explain why I don’t use translate3d to move list items. As you know translate3d allow browser to apply hardware process called GUP on multithread. Executing a certain process on parallel to single thread is help performance up. Many of developers mention such features. I could likewise boost the performance if I used translate3d instead of scrollLeft. This carousel has, however, another operation. The feature is not only automatically scroll but also draggable operation and after dragging out the scroll items must stick to either of the edges without cutting item size.
Overflow property
Stating the conclusion first, the reason why the above code didn’t make it is overflow property. I didn’t assign overflow property to a list container. In this case a carousel class. If no overflow property, the scrollLeft property of the container won’t be enable, nevertheless left or translate3d property still working. Therefore, only what I should fix is add overflow:auto; or even overflow:hidden; is fine.
Conclusion
If your element won’t move with scrollLeft, doubt overflow property. Perhaps you could solve scrolling problem.
