One of the components I'm working on features a gallery with an X axis orientation.
<div class="gallery">
<div (mouseenter)="scrollTo('left', $event)" (mouseleave)="clearIntervalRepeater()" class="left"></div>
<div (mouseenter)="scrollTo('right', $event)" (mouseleave)="clearIntervalRepeater()" class="right"></div>
<div class="container-fluid">
<div #sidewayScroller class="sideway">
<img *ngFor="let item of galleryImages" [src]="item" alt="gallery-image">
</div>
</div>
</div>
The "left" and "right" divs inside are transparent, absolute elements meant for hover effects on the #sidewayScroller element.
I am attempting to achieve a smooth scroll effect when hovering over the "left" or "right" side.
Hover function :
scrollTo(position, event: HTMLElement){
if(position == 'left'){
console.log('left');
this.repeater = setInterval(() => {
this.el.nativeElement.scrollTo({
left: this.el.nativeElement.scrollLeft - 200,
behavior: 'smooth',
})
}, 150);
} else {
this.repeater = setInterval(() => {
console.log('right');
this.el.nativeElement.scrollTo({
left: this.el.nativeElement.scrollLeft + 200,
behavior: 'smooth',
})
}, 180);
}
}
clearIntervalRepeater(){
console.log('clearing');
clearInterval(this.repeater);
}
Issue: The scrolling is not smooth and has glitches. I'm seeking assistance in finding the right interval timing or exploring alternative methods to achieve a smoother scroll effect. Can someone help me with this?