Currently, I am developing a fun CSGO-inspired box opening feature on my food recipe website that randomly selects recipes for users. However, I have encountered some challenges with the scrolling functionality. It seems to be incompatible with certain browsers such as Edge, Opera, and Chrome, whereas Firefox works smoothly.
To demonstrate the issue, I have created a codepen showcasing the relevant code here: https://codepen.io/jlmadsen/pen/GRWKLKv
I suspect that the following code block may be causing the problem:
let total_length = image_container.scrollWidth - (450*2.5)
image_container.scrollTo(0,0)
scroll_interval = setInterval(() => {
let remaining = total_length - image_container.scrollLeft
// if further than 30 units away keep scrolling
if (remaining > 30) {
let distance = remaining / 15
image_container.scrollTo(image_container.scrollLeft + distance, 0);
} else {
// stop scroling
}
}, 15 );
If anyone has insights or solutions for resolving the browser compatibility issue, your help would be greatly appreciated!