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

Solution for Docker Swarm external verification load balancing not taking effect

CSS3 achieves infinite scrolling/carousel effect of list

Solution for Docker Swarm external verification load balancing not taking effect

CSS3 achieves cool sliced image carousel effect

Detailed explanation of Vuex overall case

Summary of tips for making web pages

Collection of 12 practical web online tools

Example statements for indexes and constraints in MySQL

Detailed explanation of the case of Vue child component calling parent component method

MySQL should never write update statements like this

Javascript design pattern prototype mode details

Example of how to modify styles via CSS variables

Recommend

Vue Element front-end application development to obtain back-end data

Detailed explanation of the principle and function of Vue list rendering key

Detailed installation and configuration tutorial of MySQL flashback tool binlog2sql

Detailed explanation of basic concepts of HTML

Node+Express test server performance

CSS3 changes the browser scroll bar style

Use of MySQL truncate table statement

Solve the problem that the borders of the search box and the search button cannot overlap

Detailed explanation of cocoscreater prefab

How to solve the problem of ERROR 2003 (HY000) when starting mysql

Complete code for implementing the vue backtop component

How to operate Docker and images

Detailed explanation of the perfect integration solution between Serv-U FTP and AD

In-depth explanation of Mysql deadlock viewing and deadlock removal

MySQL 5.7.18 Green Edition Download and Installation Tutorial