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

CSS3 achieves infinite scrolling/carousel effect of list

How to open the port in Centos7

Solve the mobile terminal jump problem (CSS transition, target pseudo-class)

Zen Coding Easy and fast HTML writing

HTML Several Special Dividing Line Effects

Start a local Kubernetes environment using kind and Docker

JavaScript to achieve fancy carousel effect

MySQL database migration quickly exports and imports large amounts of data

Implementing simple chat room dialogue based on websocket

TypeScript enumeration basics and examples

Specific use of routing guards in Vue

Recommend

Redission-tomcat quickly implements deployment from single machine to multi-machine deployment

jQuery achieves seamless scrolling of tables

Steps to use VMWare to build a Linux environment under Windows (picture and text)

Introduction to using window.open, a jump menu that opens in a new window

mysql 5.7.5 m15 winx64.zip installation tutorial

Introduction to the use of data custom attributes in HTML and plug-in applications

MySQL transaction concepts and usage in-depth explanation

A brief discussion on HTML special character encoding CSS3 content: "I am a special symbol"

A detailed introduction to the CSS naming specification BEM from QQtabBar

Steps and pitfalls of upgrading linux mysql5.5 to mysql5.7

Methods and steps for deploying go projects based on Docker images

How to implement web page compression in Nginx optimization service

Detailed explanation of common usage of MySQL query conditions

MySQL login and exit command format

In-depth understanding of the vertical-align property and baseline issues in CSS