My programming journey involved creating a code snippet that automatically scrolls paragraphs horizontally, giving it the appearance of "Breaking News" updates on popular websites.
The Javascript script I implemented performs automatic scrolling, but once it reaches the end, the scrolling stops abruptly. I experimented with fast scrolling back to the beginning, but found it to be a less elegant solution.
Is there a more graceful way to continuously loop these scrolling paragraphs without any interruptions?
const flavoursContainer = document.getElementById('flavoursContainer');
const flavoursScrollWidth = flavoursContainer.scrollWidth;
window.addEventListener('load', () => {
self.setInterval(() => {
if (flavoursContainer.scrollLeft !== flavoursScrollWidth) {
flavoursContainer.scrollTo(flavoursContainer.scrollLeft + 1, 0);
}
}, 15);
});.container {
width: 100vw;
overflow-x: scroll;
white-space: nowrap;
background-color: #fff;
display: flex;
-ms-overflow-style: none;
scrollbar-width: none;
}
.scroll-disabler {
width: 100vw;
height: 34.4px;
position: absolute;
background-color: rgba(0,0,0 , 0.0001);
}
::-webkit-scrollbar {
display: none;
}
p {
padding: 8px;
}<div class="container" id="flavoursContainer">
<div class="scroll-disabler"></div>
<p>Experiment with this looping text animation Experiment with this looping text animation</p>
<p>Experiment with this looping text animation Experiment with this looping text animation</p>
</div>