CSS3 achieves infinite scrolling/carousel effect of list

Effect Preview

Ideas

Scroll the current list to the end of the last item and then instantly switch back to the first item

Problem

1. How to implement infinite carousel? The problem is that when the list scrolls to the end, there will be blank space (extra space) at the bottom. How to deal with it?
Just add the duplicate items at the beginning of the list to the end of the list (for example, 1, 2, 3, 4, and 5 after 10 in the figure are duplicate items).
The number of duplicate items added is determined by the current list height and the list item height, for example:
If the list height is 150px and the list item height 30px , you need to add 150 / 30 = 5 duplicate items to the end of the current list to remove the blank space.

2. How to let users switch back to the first item without noticing? After adding the duplicate items, control the switching timing and switch immediately when the list scrolls to the end of the last item (the beginning of the first item of the duplicate item). For example:
If there are 10 items in the list, then switch immediately when the list moves up to 10 * 30px = 300px to achieve imperceptible switching

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Infinite scrolling list</title>
</head>
<style>
    .container {
        position: relative;
        background-color: #a4ffcc;
        /* The parent container needs to have a clear height */
        height: 150px;
        width: 200px;
        margin: auto;
        overflow: hidden;
    }

    .container > .scroll-list {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        animation: scroll 6s linear infinite normal;
    }

    .container > .scroll-list > div {
        width: 100%;
        /* The scrollable item needs to have a specific height */
        height: 30px;
        background-color: #1ea7ff;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
    }

    .container > .scroll-list > div:nth-child(2n) {
        background-color: #18d9f8;
    }

    @keyframes scroll {
        100% {
            /*Total height of content to scroll*/
            top: -300px;
        }
    }
</style>
<body>
    <div class="container">
        <div class="scroll-list">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <!-- The following code is to allow the scrolling content to display one more screen (remove blank space/infinite carousel): Please calculate the number according to the height-->
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>
</body>
</html>

This is the end of this article about how to implement infinite scrolling/carousel of lists with CSS3. For more relevant CSS3 list scrolling and carousel content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: How to import CSS styles into HTML external style sheets

>>: A brief summary of how to write paths when HTML files introduce external CSS files